Web前端性能优化详解之CSS与JS加载

浏览器加载页面和渲染过程

加载过程

• 浏览器根据DNS 服务器得到域名的IP地坛
• 向这个 IP 的机器发送 HTTP请求
• 服务器收到，处理并返回 HTTP请求
• 浏览器得到返回内容

渲染过程

• 根据 HTML 结构生成 DOM 树
• 根据 CSS 生成 CSSOM
• 根据 RenaderTree 开始渲染和展示
• 遇到 <strcipt >会执行并阻塞渲染

懒加载

• 图片进入可视区域之后请求图片资源
• 对于电商等图片很多，页面很长的业务场景适用
• 减少无效资源的加载
• 并发加载的资源过多会阻塞js的加载，景程网站正常使用

预加载

• 图片等静态资源在使用之前的提前请求
• 资源使用到时能从缓存中加载，提升用户体验
• 页面展示的依赖关系维护

页面回流

• 当render tree 中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等 改变而需要重新构建。这就称为回流(reflow)
• 当页面布局和几何属性改变时就需要回流

重绘

• 当 renader tree 中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如 background-color。

回流必将引起重绘而重绘不一定引起回流

触发页面布局的属性

• 盒子模型相关属性会触发重布局
• 定位属性及浮动也会触发重布局
• 改变节点内部文字结构也会触发重布局

只触发重绘的属性

新建DOM的过程

　1. 获取DOM后分割为多个图层
　2. 对每个图层的节点计算样式结果（Recalculate style--样式重计算）
　3. 为每个节点生成图形和位置（Layout--回流和重布局）
　4. 将每个节点绘制填充到图层位图中（Paint Setup和Paint--重　绘）　
　5. 图层作为纹理上传至GPU
　6. 符合多个图层到页面上生成最终屏幕图像（Composite Layers--图层重组）

Chrome创建图层的条件

1. 3D或透视变换（perspective transform）CSS属性
2. 使用加速视频解码的<video>节点
3. 拥有3D（WebGL）上下文或加速的2D上下文的<canvas>节点
4. 混合插件（如Flash）
5. 对自己的opacity做CSS动画或使用一个动画webkit变换的元素
6. 拥有加速CSS过滤器的元素
7. 元素有一个包含复合层的后代节点（一个元素拥有一个子元素，该子元素在自己的层里）
8. 元素有一个z-index较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）

实战优化点

1. 用translate替代top改变
2. 用opacity替代visibility
3. 不要一条一条地修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className
4. 把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次，然后再把它显示出来
5. 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
6. 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
7. 动画实现的速度的选择
8. 对于动画新建图层
9. 启用 GPU 硬件加速

愿你成为终身学习者