前言
前端人员可能不太了解浏览器渲染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来观察不同方式动画的性能效率。
