浏览器页面的渲染流程

浏览器的主要功能是将用户需要的Web资源在浏览器上呈现出来，通过用户输入URL来指定所请求的资源位置，从服务器上请求资源，并将其显示在浏览器窗口中

1、解析HTML文件，构建DOM Tree

自上而下的深度遍历过程，会将当前结点的所有子节点构建完成后，进行当前结点的下一个兄弟结点的构建，直到将所有的标签都遍历完成。遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）

2、解析CSS，构建CSSOM Tree（css规则树）

给各个元素添加对应样式信息，计算在浏览器中占据的空间大小

3、将DOM Tree和CSSOM Tree合并，构建Render tree（渲染树）

结合DOM数和CSSOM树，生成一颗渲染树的过程称为Attachment。是页面可视化元素按照其显示顺序组成的树，可以让浏览器按照正确的顺序绘制内容。

4、生成布局（flow），浏览器在屏幕上“画出”渲染树中所有的结点

根据Render Tree进行结点信息计算。浏览器渲染页面默认采用流式布局，从根（对应于HTML文档的元素）开始，然后递归遍历部分或所有的框架层次结构，为呈现器计算几何信息。

5、将布局绘制（paint）在屏幕上，显示出整个页面

根据计算好的信息绘制整个页面（painting）

在浏览器渲染中重绘（repaint）和回流（reflow）

• 回流（reflow）：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。
• 重绘（repaint）：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。比如改变某个元素的文字颜色、背景色等。
• 重绘不一定会引发回流，回流必然导致重绘。