简述reflow和repaint

一般，在页面开发时，不可避免地会发生repaint和reflow，除非是静态页面。从字面上理解repaint，它表示“重绘”，而reflow则是“回流”。他们的目的都是表现出新的页面样貌。

一、repaint重绘

repaint一般在改变 DOM 元素的视觉效果时触发，即不涉及任何排版布局的问题时触发，它主要针对的是某一dom元素的重新绘制。一般触发repaint的常见场景有以下几个：

1. color的修改，如color=#ddd；
2. text-align的修改，如 text-align：center；
3. a:hover也会造成重绘；
4. :hover引起的颜色等不导致页面回流的style变动；等等。

二、reflow回流

reflow回流是在某一个 DOM 元素的位置发生改变后触发，而且它会重新计算所有dom元素的位置和在页面中的占有的面积，所以一般来说，reflow的影响比repaint要大得多，它将会影响它所有的children、ancestors及siblings。所以影响是针对整个页面的，整个页面都需要重新渲染。一般触发reflow的常见场景有以下几个：

• 使用JS改变DOM元素时会触发reflow，即添加(appendChild)、删除(removeChild)DOM元素或者改变DOM元素的可见性(display:none)
• CSS中width/height/border/margin/padding的修改，如width=778px；
• CSS3 动画(animation)和过渡(transition)，动画的每一frame都会触发reflow；
• 读取元素的某些属性(offsetLeft/Top、offsetHeight/Width、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))时会触发reflow，因为这些属性需要依赖一些元素去计算；
• :hover等伪类引起的元素表现改动造成页面回流；
• scroll页面，这个不可避免；
• 字体大小改变或更换字体   (font)；
• resize页面，桌面版本的进行浏览器大小的缩放；等等。

三、性能优化

从上面两点我们知道，reflow的影响是针对所有的元素，而repaint针对触发视觉变化的元素，可以知道reflow的性能消耗要比repaint要大很多，那我们要如何尽可能避免触发reflow和repaint，提高性能？可以从以下几点考虑

• 尽可能的减少DOM元素相互影响

• 避免设置内联样式

• 尽量简写CSS样式

• 删除复杂动画，尽量给动画元素设置position:fixed/absolute，使动画元素从DOM流中独立出来，从而减少对其他元素的影响。同时，尽量牺牲平滑度去满足性能，因为动画精度太强，会造成更多次的repaint/reflow

• 避免使用table进行布局：table的每个元素的大小以及内容的改动，都会导致整个table进行重新计算，造成大幅度的repaint或者reflow。改用div则可以进行针对性的repaint和避免不必要的reflow

• 避免在CSS中使用运算式：学习CSS的时候就知道，这个应该避免，不应该加深到这一层再去了解，因为这个的后果确实非常严重，一旦存在动画性的repaint/reflow，那么每一帧动画都会进行计算，性能消耗不容小觑。

• 减少DOM的层级，减少DOM的数量，DOM数量越少越好
• 慎改class！！去改子元素少的DOM的class
• 尽量采取批量更新元素样式的方式，比如可以将需要修改的样式集合放在一个class里，将这个class附给元素。