[Web 性能] repaint and reflow (重绘和回流)

页面呈现流程

在介绍重绘和回流之前， 先看一下HTML 页面呈现的流程。

可能各浏览器会有一些细微的差别， 但基本上大同小异。

1.  浏览器把获取到的html代码解析成1个Dom树。根节点就是document 对象，这里包含了所有的html tag，包括display:none隐藏，还有用JS动态添加的元素等。

2. 浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而firefox会去掉_开头的样式。

3. dom tree和样式结构体结合后构建呈现树(render tree),render tree有点类似于dom tree，但其实区别有很大，render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点&