重绘与回流的关系

重绘与回流 （repaint与reflow）
引起DOM树结构变化，页面布局变化的行为叫做回流
只是样式的改变，不会改变DOM结构，页面布局变化的行为叫做重绘

回流一定伴随着重绘，重绘不一定伴随回流

改变元素的宽高、位置属于回流
只改变元素的颜色、背景属于重绘

哪些行为会引起回流，怎么避免
1.元素的增删行为

2.几何属性的变化（如宽高）

如果同时要改变多个属性，最好将这些属性定义在class中，直接修改class名，这样只会引起一次回流

3.元素位置发生改变

 修改一个元素的margin、padding之类的操作，所以在做元素位移的动画，不要更改margin的属性，使用定位脱离文档流后改变位置会更好

4.获取元素的偏移量属性

比如获取一个元素的scrollTop，scrollLeft之类的属性，浏览器为了保证值的正确也会回流取得最新的值，若是多次操作，最好取完做个缓存

5.页面初次渲染，这样的回流无法避免
6.浏览器窗口尺寸发生改变也会引起回流（resize）

隐藏元素：display：none（回流+重绘）；visibility：hidden（只重绘）