浏览器渲染过程
- 解析 HTML，生成 DOM 树，解析 CSS，生成 CSSOM 树
- DOM 和 CSSOM 合并，并计算每个 DOM 节点的最终样式，生成渲染树 (Render tree)
- 布局：计算每个节点在页面上的大小和位置，生成布局树（Layout Tree）
- 绘制：根据渲染树和布局信息，生成绘制指令（绘制过程中可能有多个独立图层），进行光栅化【光栅化是将矢量图形（布局树中的元素）转换为像素（位图）的过程】
- 合成：将各个图层组合后的位图发送 GPU，最终渲染到屏幕上
回流 重绘
- 回流（Reflow）：网页渲染引擎根据元素的尺寸、位置等来计算页面的排版和布局（页面第一次回流叫布局）
- 重绘（Repaint）：网页渲染引擎根据显示属性 (如颜色、背景、边框样式等) 重新绘制页面元素，不影响元素的位置和尺寸
避免频繁回流重绘
- 合并多次 DOM 操作（虚拟 DOM）
- 避免频繁读取写入样式
- 使用
transform 和 opacity 进行动画，直接由 GPU 加速
- 使用
requestAnimationFrame
- 需要频繁回流或重绘的节点，可以通过
will-change 设定成独立的图层
各个浏览器内核
| 内核 | 代表浏览器 | 开源性 | 性能特点 | 适用场景 |
|---|
| Trident | IE、360（兼容模式） | 闭源 | 兼容老旧网站，速度慢 | 企业系统兼容性需求 |
| Gecko | Firefox | 开源 | 高安全性，拓展性强 | 开发者、隐私敏感场景 |
| WebKit | Safari | 开源 | 移动端优化，能效比高 | iOS/Android 移动设备 |
| Blink | Chrome、Edge | 开源 | 渲染快，标准支持全面 | 现代 Web 应用开发 |
| Presto | Opera（旧版） | 闭源 | 历史最快，已淘汰 | 无主流应用 |