简述reflow和repaint

今天在看面试题的时候遇到reflow和repaint的问题，之前并无接触过，因此拿来学习一下~

reflow 和 repaint 会拖慢浏览器的速度，并且用户和Web页面都不能在 reflow 和 repaint 执行时作任何操做和响应

reflow和repaint定义及触发场景

repaint

repaint是重绘，在改变 DOM 元素的视觉效果时触发，即不涉及任何排版布局的问题时触发。

触发场景：

• opacity
• text-align/text-decoration
• color/background-color
  
• :hover

repaint发生后浏览器会去 check 这个DOM元素内的全部节点，因此repaint会影响某个DOM进行重绘。

reflow

reflow是回流，在某一个 DOM 元素的位置发生改变后触发，并且它会从新计算全部元素的位置和在页面中的占有的面积，因此reflow的影响比repaint更大，由于它将会影响它全部的children、ancestors及siblings。因此影响是针对整个页面的，整个页面都须要从新渲染。

触发场景:

• 使用JS改变DOM元素时会触发reflow，即添加(appendChild)、删除(removeChild)DOM元素或者改变DOM元素的可见性(display:none)

• CSS中width/height/border/margin/padding的改变

• CSS3 动画(animation)和过渡(transition)，动画的每一frame都会触发reflow

• 读取元素的某些属性(offsetLeft/Top、offsetHeight/Width、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))时会触发reflow，由于这些属性须要依赖一些元素去计算
  

• :hover 引发的元素表现变化

• 浏览器大小的改变   (resize)

• 字体大小改变或更换字体   (font)

• 更换class样式表

如何尽量的避免触发reflow和repaint，提升性能？

1. 尽量的减小DOM元素相互影响

2. 避免设置内联样式

3. 尽可能简写CSS样式

4. 删除复杂动画，尽可能给动画元素设置position:fixed/absolute，使动画元素从DOM流中独立出来，从而减小对其余元素的影响。同时，尽可能牺牲平滑度去知足性能，由于动画精度太强，会形成更屡次的repaint/reflow

5. 避免使用table进行布局：table的每一个元素的大小以及内容的改动，都会致使整个table进行从新计算，形成大幅度的repaint或者reflow。改用div则能够进行针对性的repaint和避免没必要要的reflow

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

7. 减小DOM的层级，减小DOM的数量，DOM数量越少越好
8. 慎改class！！去改子元素少的DOM的class
9. 尽可能采起批量更新元素样式的方式，好比能够将须要修改的样式集合放在一个class里，将这个class附给元素

关于性能问题还有不少须要说的，以前在准备面试的时候看到Yahoo总结的一些性能提高的方法，要慢慢积累起来！

最近回学校写毕业论文的空档又复习总结了一些好比闭包啊this指向啊做用域啊之类的js的题，明天继续发博~你们晚安~