浏览器的渲染过程

浏览器的渲染过程：

1. 浏览器将HTML解析成一个DOM Tree;
2. 将CSS解析成一个CSSOM(CSS Object Model)树;
3. 合成渲染树：将DOM 树和CSSOM 树合成成一个Rendering Tree渲染树;
4. 有了渲染树，浏览器已经知道了文档HTML中有哪些节点和各个节点的CSS样式及他们之间的从属关系，接下来就是Layout计算出各个节点在屏幕中的位置。
5. 最后就是绘制了。

重排Reflow:

    Dom结构中各个元素都有自己的盒子（模型），这些都需要浏览器根据css样式来进行计算并根据计算的结果将元素放置到它该放的位置上，这个位置称为Reflow。

    哪些操作会触发Reflow:

        1.增加、删除、修改DOM节点都会触发重排和重绘；

        2.移动DOM的位置；

        3.修改元素的样式；

        4.修改网页的默认字体。

重绘Repaint:

    当盒子的位置、大小、颜色及其他属性确定下来后，浏览器会按照这些特性将这些元素绘制出来，这个过程称为Repaint。

什么操作会触发重绘：

    无论是Dom改动还是CSS改动，只要改变了当前的显示就会触发重绘。

    如何尽量少的重绘：尽量将多次Dom操作改为一次操作