浏览器如何绘制页面

浏览器如何绘制页面

虽然不同的浏览器有着不同的内核，但是浏览器的渲染流程都是相似的：

构建DOM树 => 创建StyleRules => 构建Render树 => 布局Layout => 绘制Painting

1. 构建DOM树：

   ​ 分析HTML，构建成DOM树。（每个DOM节点都有attach方法，用来接收样式信息，返回一个render对象，这些render对象最终会构建成一个Render树）

2. 构建StyleRules：

   ​ 分析CSS文件以及DOM元素上的行内样式，生成样式树。

3. 构建Render树：

   ​ 将DOM树和样式树对应起来，生成一个Render树。

4. 布局：

   ​ 浏览器为Render树的每个节点都划分一个将要在页面中显示出来的区域。

5. 绘制：

   ​ 调用每个Render树节点的paint方法，把他们绘制出来。一次页面的绘制就完成了。

回流与重绘

1. 回流

   ​ render tree并不是一次就能构建成最终方案的。在render tree的构建过程中，如果遇到了元素的尺寸、布局、或者display的改变（影响到了页面的布局），就需要重新构建，这就叫回流。每个页面至少要经过一次回流，因为在页面第一次加载的时候要构建render tree。

   ​ 在回流的过程中，render tree受到影响的地方会被废弃，并被重新构造。完成回流后，浏览器会重新绘制这一重新构造的部分，这就叫做重绘。

2. 重绘

   ​ 顾名思义，重绘即重新绘制。当render tree中的一些元素只发生了外观的变化（不影响布局，例如：background-color），不会发生回流，并且浏览器重新绘制这一部分，称为重绘。

3. 回流与重绘的关系

   ​ 经过对上文的理解，相信大家已经多少有了一点答案：回流必定引起重绘，而重绘不一定引起回流。

小结

​ 这里简单的介绍了一下浏览器的渲染机制，没想到看似简单的网页居然要经过那么复杂的流程才能展现在大家的面前…

​ 是的，对于计算机来说，它依然很复杂，所以DOM操作的低效率一直被人们所诟病。任何网页中只要涉及到对DOM的频繁操作，一定会遇到严重的性能问题。所以在此之上，我们有很多方案来对它进行优化，在之后的章节中会有所详细的介绍。