从chrome开发工具中直观了解浏览器的渲染过程

前言

前端人员可能不太了解浏览器渲染Html的过程，或者了解相关知识，但是不能通过具体的方式来更深入认识。

本文通过Chrome的开发者工具来直观了解浏览器渲染html的过程，能对于页面性能优化有更好的帮助。

---

浏览器渲染过程

我们先看一张图解：

我们看到Html和Css先是分开解析，然后合在一起生成RenderTree，最后绘制，显示。

浏览器渲染步骤

浏览器渲染步骤大体可分为4步：

• 1、HTML被HTML解析器解析成DOM Tree, css则被css解析器解析成CSSOM Tree。

• 2、DOM Tree和CSSOM Tree解析完成后，被附加到一起，形成渲染树（Render Tree）。

• 3、节点信息计算(重排)，这个过程被叫做Layout(Webkit)或者Reflow(Mozilla)。即根据渲染树计算每个节点的几何信息。

• 4、渲染绘制(重绘)，这个过程被叫做(Painting 或者 Repaint)。即根据计算好的信息绘制整个页面。

以上4步简述浏览器的一次渲染过程，理论上，每一次的dom更改或者css几何属性更改，都会引起一次浏览器的重排/重绘过程，而如果是css的非几何属性更改，则只会引起重绘过程。所以说重排一定会引起重绘，而重绘不一定会引起重排。

重排重绘解析

简单来说：

• 重排（Layout）就是页面元素发生几何变更（例如位置变更），牵连其它元素发生几何变化，导致页面所有元素执行一次重新排版。

• 重绘（Paint）就是页面元素发生样色变更（例如颜色变更），但不影响其它元素发生几何变化，使页面执行一次重新绘图。

其中，重排会消耗更多性能，重绘则消耗小部分性能，所以我们优化页面，要尽量减少重排！

---

实例演示

现在我们做一个Demo，然后通过Chrome的Performance工具来直观了解浏览器渲染Html的过程：

页面有一个盒子和2个按钮，现在我们点击录制，然后刷新页面，看看过程是怎样的

只修改背景色

点击“改变背景色”看看过程是怎样的：

可以看到如果只是改变背景色，并没有触发重排（Layout），只触发了重绘（Paint）。

只修改宽度

点击“改变宽度”看看过程是怎样的：

可以看到如果只是改变宽度，则既触发重排（Layout）又触发重绘（Paint）

当然还有其它例如其它过程，例如合成图层（Composite Layers）,这又是一大学问，日后再探讨。

---

总结

我们通过上面简单的demo了解到浏览器渲染Html的过程，也了解到重排和重绘的知识，所以我们优化页面性能，要尽量减少重排（减少dom操作、减少几何属性操作）。

下一篇《前端动画性能比较（js动画{ translate vs left/top } vs css动画）》我们通过具体demo来观察不同方式动画的性能效率。