运行环境
2021-03-24 15:03:37 0 举报AI智能生成
前端面试_运行环境
作者其他创作
大纲/内容
运行环境即浏览器（sever 端 有 nodejs）
网页加载过程
资源的形式
- html 代码
- 媒体文件，如图片、视频等
- js css
加载过程
- DNS 解析：域名 -> IP 地址（Domain Name Server）
- 浏览器根据 IP 地址向服务器发起 http 请求
- 服务器处理 http 请求，并返回给浏览器
渲染过程
- 根据 HTML 代码生成 DOM Tree；
- 根据 CSS 生成 CSSOM（CSS 对象模型）；
- 将 DOM Tree 和 CSSOM 整合成 Render Tree（渲染树）；
- 根据 Render Tree 渲染页面；
- 如果遇到 <script> 则暂停渲染，优先加载并执行 JS 代码，完成后再继续（JS 和 DOM 渲染共用一个线程）；
- 直至渲染完 Render Tree。
为何建议把 css 放在 head 中？
把 css 代码在 DOM 树生成完成之前加载，避免重新渲染页面。
把 css 代码在 DOM 树生成完成之前加载，避免重新渲染页面。
为何建议把 js 放在 body 最后?
js 可能会阻断渲染进程，使得页面渲染时间过长，从而影响页面加载速度。
js 可能会阻断渲染进程，使得页面渲染时间过长，从而影响页面加载速度。
图片的加载不会阻塞 DOM 渲染
window.onload 和 DOMContentLoaded
- window.onload 资源全部加载完才能执行，包括图片、视频等；
- DOMContentLoaded DOM 渲染完成即可，图片可能尚未下载。
相关面试题
从输入 url 到渲染出页面的过程
下载资源：各个资源类型，下载过程
页面渲染：html css js 图片等
页面渲染：html css js 图片等
window.onload 和 DOMContentLoaded 的区别
性能优化
原则
- 多使用内存、缓存或其他方法
- 减少 CPU 计算量，减少网络加载耗时
从何入手
让加载更快
- 减少资源体积：压缩代码（webpack），压缩图片（TinyPNG）
- 减少访问次数：合并代码（js，css，img-雪碧图），SSR 服务端渲染（服务端将页面及页面要渲染的内容一并给前端），缓存（hash）
- 使用更快的网络：CDN（根据区域获取资源）
让渲染更快
- CSS 放在 head 里，JS 放在 body 最下面
- 尽早开始执行 JS，用 DOMContentLoaded 触发
- 懒加载（图片懒加载，上滑加载更多）
- 对 DOM 查询进行缓存
- 频繁 DOM 操作，合并到一起插入 DOM 结构
- 节流 throttle， 防抖 debounce，让渲染更加流畅
性能优化示例
缓存
静态资源加 hash 后缀，根据文件内容计算 hash；
文件内容不变，则 hash 不变，则 url 不变；
hash 和 url 不变，则自动触发 http 缓存机制，返回 304。
文件内容不变，则 hash 不变，则 url 不变；
hash 和 url 不变，则自动触发 http 缓存机制，返回 304。
CDN
专门做静态文件服务，且根据地域来做服务，更大程度上满足网络性能
SSR
服务器端渲染：将网页和数据一起加载，一起渲染
非 SSR（前后端分离）：先加载网页，再加载数据，再渲染数据
对 React Vue 的服务端渲染，提升性能
懒加载
首屏图片先加载，后面图片滑动到再加载
先加载预览图，在需要加载图片时将图片地址赋值给 src
缓存 DOM 查询
JS 计算是非常快的，DOM 查询比较耗时
防抖 debounce
监听一个输入框，文字变化后触发 change 事件
直接监听 keyup 事件，则会频繁触发 change 事件
防抖：用户输入结束或暂停时，才会触发 change 事件
手写防抖
节流 throttle
拖拽一个元素时，要随时拿到该元素被拖拽的位置
直接用 drag 事件，则会频繁触发，很容易导致卡顿
节流：无论拖拽次数多快，都会每隔 100ms 触发一次
手写节流
安全
常见的 web 前端攻击方式
XSS 跨站请求攻击
通过 script 脚本攻击，获取 cookie
XSS 预防
替换特殊字符，如 < 替换为 < > 替换为 >（<script> 替换为 <script> 直接显示，而不会作为脚本执行）
前后端都需要做替换
npm xss 工具可用
XSRF 跨站请求伪造
通过 img 攻击
XSRF 预防
使用 post 接口
增加验证，如密码、验证码、指纹等
0 条评论
下一页
