重绘：
只是样式的变化，不会引起DOM树变化，页面布局变化的行为叫重绘，且重绘不一定会伴随回流。
回流：
引起DOM树结构变化，页面布局变化的行为叫回流，且回流一定伴随重绘。
什么情况下回导致回流，如何避免回流？
1.页面初次渲染
2.浏览器窗口尺寸改变（resize事件发生也会引起回流。）
3.DOM的增删行为
比如你要删除某个节点，给某个父元素增加子元素，这类操作都会引起回流。
如果要加多个子元素，最好使用documentfragment。（让要操作的元素进行离线处理，处理完事以后再一起更新）
documentFragment是一个保存多个element的容器对象（保存在内存）当更新其中的一个或者多个element时，页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面。
documentFragment用来批量更新
4.几何属性的变化
比如元素宽高变了，border变了，字体大小变了，这种直接会引起页面布局变化的操作也会引起回流。
如果你要改变多个属性，最好将这些属性定义在一个class中，直接修改class名，这样只用引起一次回流。
5.元素位置的变化
改一个元素的左右margin，padding之类的操作
所以在做元素位移的动画，不要更改margin之类的属性，使用定位脱离文档流后改变位置会更好
网友评论