重绘(repaint)和回流(reflow)

概念

一个页面从加载到完成，首先是构建DOM树，然后根据DOM节点的几何属性形成rander树(渲染树)，当渲染树构建完成，页面就根据DOM树开始布局了，渲染树也根据设置的样式对用这些节点

在和这个过程中，回流与DOM树有关，重绘与渲染树有关，怎么理解

比如我们删除DOM节点，修改一个元素的高度，页面布局发生改变，DOM结构发生变化，那么就肯定重构DOM树，而DOM树与渲染树是紧密相连的，DOM树构建完成，渲染树也随之被再次渲染，这个过程叫回流

当你给一个元素更换颜色，这样的行为是不会影响页面布局的，DOM树不会发生改变，但颜色变了，渲染树得重新渲染，这就是重绘

回流的代价远大于重绘，且回流必然导致重绘，而重绘不会导致回流

回流是DOM结构发生改变，DOM树重新构建，渲染树重新渲染

重绘是DOM结构不变，DOM不需要重新构建，渲染树重新渲染

哪些情况会导致减少回流，怎么避免

1.DOM的增删行为

比如说你要删除某个元素，增加某个元素，这类操作都会引起回流。如果你要加某个子元素，最好使用documentfragment

2.几何属性的变化

比如元素宽高变了，border变了，字体变了，这类操作会导致页面布局的变化的操作也引起回流。如果你要改变多个属性，最好将这些元素定义到一个类中，直接修改class，这样只会引起一次回流。

3.元素的位置发生变化修改一个元素的margin padding之类的操作，所以在做元素位移的动画，不要更改margin之类的属性，使用定位脱离文档流改变位置更高

4.获取元素的偏移量

例如获取元素的scrollTop，scrollleft，scrollWidth，offsetTop，offsetLeft之类的属性，浏览器为了保证值的正确也会回流获取最新的值，所以你要多次操作获取完做个缓存

5.页面初次渲染

这样的回流无法避免

6.浏览器的尺寸发生了改变

resize事件发生也会引起回流

只要不影响布局的行为只会影响重绘