重排和重绘
- 浏览器渲染原理
- reFlow重新布局
- rePaint重绘
- 扩展信息
- 为什么 transform 的效率高?
浏览器渲染原理
想要理解reFlow和rePaint,就需要先明白浏览器渲染一个html字符串文档的流程。打开一个浏览器标签页,地址栏输入地址回车之后,浏览器进程会开启一个网络进程,获取对应资源,获取到之后会开启一个对应的渲染进程,渲染进程会开启渲染主进程,此时能拿到网络返回的HTML字符串文本,接下来开始浏览器渲染的8个大步骤。
- 解析HTML,首先解析结果会是一个DOM树和一个CSS Object Model树。
- 解析过程中遇到 CSS 解析 CSS,遇到 JS 执行 JS。为了提高解析效率,浏览器在开始解析前,会启动一个预解析的线程,优先下载外部 CSS 文件和 外部的 JS 文件。
- 如果渲染主线程解析到
link
位置,此时外部的 CSS 文件还没有下载解析好,渲染主线程不会等待,继续解析后续的 HTML。这是因为下载和解析 CSS 的工作是在预解析线程中进行的