reFlow和rePaint

浏览器渲染原理

想要理解reFlow和rePaint，就需要先明白浏览器渲染一个html字符串文档的流程。打开一个浏览器标签页，地址栏输入地址回车之后，浏览器进程会开启一个网络进程，获取对应资源，获取到之后会开启一个对应的渲染进程，渲染进程会开启渲染主进程，此时能拿到网络返回的HTML字符串文本，接下来开始浏览器渲染的8个大步骤。

1. 解析HTML，首先解析结果会是一个DOM树和一个CSS Object Model树。
   • 解析过程中遇到 CSS 解析 CSS，遇到 JS 执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，优先下载外部 CSS 文件和 外部的 JS 文件。
   • 如果渲染主线程解析到link位置，此时外部的 CSS 文件还没有下载解析好，渲染主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 CSS 的工作是在预解析线程中进行的