浏览器渲染机制以及重绘（Repaint）与重排（Reflow）
2019-10-28 本文已影响0人
ElricTang
一. 浏览器渲染过程
- 解析 HTML，生成 DOM Tree。
- 解析 CSS，生成 CSSOM（CSS Object Model）。
- 合并 DOM Tree 和 CSSOM，生成 Rendering Tree。
- 布局，计算节点的位置和大小信息。
- 绘制，将节点绘制到页面上。
Load 和 DOMContentLoaded
- Load事件触发时，所有资源都已加载完毕（CSS，JavaScript，图片等）。
- DOMContentLoaded事件触发时，仅代表HTML加载完成，不保证CSS，JavaScript，图片的加载。
脚本的defer和async
- defer：脚本与HTML并行加载，但是要等到HTML加载完再执行
- async：脚本与HTML并行加载，加载完马上执行（执行会阻塞HTML解析）
- 注意：并行加载不会阻塞，但脚本执行会阻塞。
二. 重绘（Repaint）
- 元素外观变化会引起浏览器重绘，以更新外观。
- 触发：修改元素的
color、background-color，修改visibility为hidden（修改可见性没有引起空间变化）
三. 重排（Reflow）
- 重排一定会引起重绘。
- 元素的布局，尺寸变化会引起浏览器重排，以重新计算位置大小。
- 触发：
| 场景 | 描述 |
|---|---|
| display:none | 空间发生变化 |
| 页面首次渲染 | 必须发生 |
| 浏览器窗口resize | 修改浏览器空间 |
| 元素尺寸变化 | 内外边距、边框、大小变化 |
| <p>内容变化、<img>图片修改 | 内容动态变化引起空间变化 |
| 使用动画或JavaScript修改元素位置 | 位置变化引起重排 |
| 动态添加或删除DOM元素 | 浏览器需要重新计算位置 |
四. 优化
1. 使用JavaScript操作元素样式时通过修改class的方法合并操作
2. 使用transform完成位置移动
3. 简化并优化CSS选择器，尽量将嵌套层减少到最小
4. 先设置元素为display：none；然后再进行页面布局等操作；设置完成后将元素设置为display：block；这样的话就只引发两次重绘和重排；
5. 将需要添加动画的元素置于额外图层（脱离文档流）
6. 尽量不要使用table布局
7. 动态插入大量元素时使用DocumentFragment过渡
