reflow(回流)与repaint(重绘)

reflow(回流）与repaint(重绘)

reflow:当render树中的一部分或者全部因为大小边距等问题发生改变而需重建的过程叫回流；

          理解：会影响排版的情况下。

repaint：当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘；

              理解：浏览器得知元素产生了不影响排版的情况下后对这个元素进行重新绘制的过程。例如改变背景色，加个下划线。

回流的原因：

    浏览器在实现回流时，会递归的处理frame，每个frame的回流都有一个原因，这个原因会随着frame逐级向下传递（传递过程中可能会改变），回流的原因决定了当前frame的回流行为：

    1.初始化（initial):DOM载入后的第一次回流，将会遍历所有frame；

    2.渐进（Incremental）：当一个frame发生渐进回流时，意味着它的前面的元素都没有变，而是它里面的元素变了。这会引                                            起自底想上的作用。 

    3.改变大小(Resize):元素的容器边界发生变化时，此时元素内部状态没变，在计算自顶向下的布局约束的同时，可以复用内部                                  状态。

    4.样式改变（stylechange）：整个frame树都应得到遍历。

    5.Dirty：当一个容器已经缓存了多个子元素的Incremental回流时，该容器出于Dirty的状态。

常见的引起回流的具体操作：

    1.调整窗口大小；

    2.改变字体大小；

    3.样式表改动；

    4.元素内容变化，尤其是输入控件；

    5.CSS伪类激活；

    6.DOM操作；

    7.offsetWidth, width, clientWidth, scrollTop/scrollHeight的计算， 会使浏览器将渐进回流队列Flush，立即执行回流