css中的repaint和reflow

页面设计中，不可避免的存在浏览器重绘repaint和回流reflow

介绍

repaint：针对某个元素进行重绘。
reflow： 针对整个页面的重排，回流。

目的

呈现一个新页面

性能

reflow性能消耗大于repaint

如何触发

style变动造成repaint和reflow。
不涉及任何dom元素的排版问题的变动为repaint。

常见触发

触发repaint

• color,hover引起的颜色，text-align等变化

触发reflow

• width/height/border/margin/padding
• 动画，display
• appendChild等dom元素操作
• font字体改变
• background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；
• scroll页面
• resize页面
• 读取元素的属性offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；

避免

• 改变dom样式 尽量通过dom树的最末端的class名修改，尽可能影响少的dom
• 应用元素的动画，使用position的fixed或absolute
• 避免使用table
• 避免在css使用运算