浏览器渲染过程
- 解析 HTML，生成 DOM 树，解析 CSS，生成 CSSOM 树
- DOM 和 CSSOM 合并成渲染树 (render tree)
- 布局：计算每个节点在页面上的大小和位置
- 绘制：根据渲染树和布局信息，浏览器将每个可见元素的视觉表示绘制到一个位图中
- 合成：将位图渲染到屏幕上
回流 重绘
- 回流（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（旧版） | 闭源 | 历史最快，已淘汰 | 无主流应用 |