运行环境
4.1 页面加载过程
4.1.1 从输入url到得到HTML的详细过程
[!NOTE] 参考计算机网络章节考点总结
4.1.2 window.onload和DOMContentLoaded的区别
- onload: 会在页面上的全部资源加载完毕之后执行（包括图片、视频）
- DOMContentLoaded：（会在页面的DOM渲染完成之后执行，此时页面图片、视频还可能没有加载完毕）
- jQuery和zepto这些类似的类库都是使用DOMContentLoaded来实现的
4.1.3 浏览器加载资源的形式有哪些？
- 输入url（或跳转页面）加载html---（eg: 输入http://www.baidu.com）
- 加载html中的静态资源（CSS，JS，图片等）
4.1.4 描述一下浏览器渲染页面的过程
- 根据HTML结构生成DOM Tree（单个节点，没样式）
- 根据CSS生成CSSOM（CSS对象模型）
- 将DOM和CSSOM整合生成一个RenderTree（每个节点都有自己的样式）
- 根据RenderTree开始渲染和显示
- 遇到script标签的时候，会执行并阻塞渲染（渲染权交给了js）----JS加载完毕之后然后执行代码
4.1.5 CSS和JS的位置问题？
CSS
- 浏览器是自上而下进行解析的，防止出现多次渲染
- CSS加载不会阻塞DOM树的解析，但是会阻塞DOM树的加载、css加载会阻塞后面js语句的执行
JS
- 可以让页面快速的展示，提升性能
- 可以在此处获取到页面上所有的标签
4.2 性能优化
4.2.1 前端性能优化的方法有哪些
- 资源的合并和压缩（HTML，CSS，JS压缩混淆，文件合并）
- 图片资源的优化
图片压缩处理
CSS雪碧图
Image Inline（Base64编码）
使用SVG和webp格式的图片
4.2.2 懒加载和预加载的区别和实现原理?
[!NOTE]
- 懒加载的实现：当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中
- 预加载的实现：提前加载图片，当用户需要查看时可直接从本地缓存中渲染
- 使用img标签
- 创建img对象
- Ajax请求（跨域问题）
4.2.3 重绘和回流的区别？
[!NOTE] 重绘：当render tree中的一些元素需要更新属性（只影响元素外观、风格，不影响布局）
回流：当render tree中的一部分因为元素的尺寸、布局、隐藏等盖面需要重新构建（页面布局和集合属性改变）
避免重绘和回流的两种方法
- 使用不会触发回流的标签（避免使用触发重绘、回流的CSS属性）
- 将重绘、回流的影响范围限制在单独的图层之内
开启浏览器自动创建图层的方法
- transform:translatez(0)
- z-index
- video 和 canvas标签
性能优化点：
- 使用top会触发回流，translate不会（transform : translaeY(0)）
- 使用opacity替换visibility（visibility会触发重绘）
- 使用className替代style
4.3 安全问题
4.3.1 前端的安全问题及预防措施
XSS攻击
利用用户的cookie进行恶意欺骗（cookie发送到外部服务器）[标签转义、白名单、黑名单过滤]
CSRF攻击
论坛发送了一个删帖的API链接（图片），结果删除了自己的帖子。[恶意发帖、删帖]（验证码、token）
二者区别
XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包