Repaint/Reflow 的基本认识和优化

1. ​浏览器解析的大概工作流 

   （1）解析HTML构建DOM树：渲染引擎开始解析HTML文档，转换树中的HTML标签或js生成的标签到DOM节点，它被称为---内容树。

   （2）构建渲染树：解析css（外部css文件和样式元素以及js生成的样式），根据css选择器计算出节点的样式，创建另一个树---渲染树。

   （3）布局渲染树：从根节点递归调用，计算每个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。

   （4）绘制渲染树：遍历渲染树。每个节点将使用UI后端来绘制。

2. 定义：

   Reflow: 对于每个DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的，开发人员定义的）来计算并根据计算结果将元素放到它出现的位置，这个过程称为 reflow。

   Repaint:当各种盒子的位置、大小以及其他属性，例如颜色、字体大小都确定下来后，浏览器便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint.

3. 引起Repaint和Reflow的一些操作：

4.  Reflow的成本比Repaint成本高得多。 

        成本比较高的操作：

       1）增加、删除、修改DOM节点时，会导致Reflow或Repaint。

       2）移动DOM位置，或者搞个动画的时候；

       3）修改CSS样式的时候；

       4）Resize窗口 或 滚动的时候；

       5）修改网页默认字体的时候；

  注意： display:none 会触发 reflow;

             visibility:hidden 只会触发repaint。

 4.  如何优化？

     1）把DOM离线后修改；

     2）不要把DOM节点的属性值放在一个循环里当成循环的变量。

     3）尽可能的修改层级比较低的DOM节点

     4）为动画HTML元件使用fixed或absoult的position。

     5）千万不要使用table布局。可能很小的一个改动会造成整个table重新布局。