前端性能优化之浏览器渲染原理和关键渲染路径、复合线程、图层及优化、JS 开销及优化和 HTML 和 CSS 优化

一、浏览器渲染原理和关键渲染路径

1. 浏览器构建渲染树，DOM 树和 CSSDOM 树合成为 Render Tree 渲染树。
2. 浏览器的渲染流程，如下所示：
   JavaScript -> Style -> Layout -> Paint -> Composite。
3. 布局与绘制，如下所示：

• 渲染树只包含网页需要的节点
• 布局计算每个节点精确的位置和大写，盒模型
• 绘制是像素化每个节点的过程

4. 影响回流的操作，如下所示：

• 添加、删除元素
• 操作 styles
• display: none
• offsetLeft、scrollTop、clientWidth
• 移动元素位置
• 修改浏览器大小、字体大小

5. 避免布局抖动 Layout thrashing，如下所示：

• 避免回流
• 读写分离

6. 使用 FastDOM 可以批量的对 DOM 的读写操作，进行性能提升。

二、复合线程、图层及优化

1. 复合线程，如下所示：

• 将页面拆分图层进行绘制再进行复合
• 利用 DevTools 了解网页的图层拆分情况
• 哪些样式仅影响复合

2. 减少重绘的方案

• 利用 DevTools 识别 paint 的瓶颈
• 利用 will-change 创建新的图层

3. 对于事件处理函数，可以使用防抖处理。
4. React 时间调度的基本原理，如下所示：

• requestIdleCallback 的问题
• 通过 rAF 模拟 rIC

三、JS 开销及优化

1. JavaScript 的开销缩短解析时间， JavaScript 的开销会存在于加载、执行、解析和编译中。
2. JavaScript 开销减少的方案，如下所示：

• Code splitting 代码拆分，按需加载
• Tree shaking 代码减重

3. JavaScript 减少主线程工作量，如下所示：

• 避免长任务
• 避免超过 1KB 的行间脚本
• 使用 rAF 和 rIc 进行时间调度

4. 对于渐进式启动 Progressive Bootstrapping，可见不可交互与最小可交互资源集。
5. V8 优化机制，如下所示：

• 脚本流
• 字节码缓存
• 懒解析

6. 抽象语法树，如下所示：

• 源码 -> 抽象语法树 -> 字节码 Bytecode -> 机器码
• 编译过程会进行优化
• 运行时可能发生反优化

7. 函数的解析方式，如下所示：

• lazy parsing 懒解析、eager parsing 饥饿解析
• 利用 Optimize.js 优化初次加载时间

8. 对象优化，如下

• 以相同顺序初始化对象成员，避免隐藏类的调整
• 实例化后避免添加新属性
• 尽量使用 Array 代替 array-like 对象
• 避免读取超过数组的长度
• 避免元素类型转换

四、HTML 和 CSS 优化

1. HTML 优化，如下所示：

• 减小 iframes 使用
• 避免 table 布局
• 压缩空白符
• 删除注释
• 避免节点深层级嵌套
• CSS 和 Javascript 尽量外链
• 删除元素默认属性

2. 如果借助工具，可以使用 html-minifier 去压缩 HTML。
3. 对于样式计算开销，可以利用 DevTools 测量样式计算开销。
4. 对于 CSS 优化，如下所示：

• 降低 CSS 对渲染的阻塞
• 利用 GPU 进行完成动画
• 使用 contain 属性
• 使用 font-display 属性