repaint和reflow理解总结

repaint(重绘):指的是一种不会影响当前DOM结构和布局的一种重绘动作。
reflow(回流):要发生在 DOM 树被操作的时候，任何改变 DOM 的结构和布局都会产生 Reflow。但一个元素的 Reflow 操作发生时，它的所有父元素和子元素都会放生 Reflow，最后 Reflow 必然会导致 Repaint 的产生。
严重性：
在性能优先的前提下，reflow的性能消耗要比repaint的大。
体现：
repaint是某个dom元素进行重绘，reflow是整个页面进行重排，也就是对页面所有的dom元素渲染。
如何触发reflow和repaint
repaint的触发：
不可见到可见（visibility 样式属性）;颜色或图片变化（background, border-color, color 样式属性）;text-align、a：hover也会造成重绘，伪类引起的颜色等变化不会导致页面的回流，仅仅会触发重绘。不改变页面元素大小，形状和位置，但改变其外观的变化
reflow的触发：浏览器窗口的变化;DOM 节点的添加删除操作一些改变页面元素大小，形状和位置的操作的触发。
如何尽量避免回流reflow：
a、尽可能在dom末稍通过修改class来修改元素的style属性，尽可能减少受影响的dom元素。
b、避免设置多项内联样式，使用常用的class方式进行设置样式，以避免设置样式时访问dom的低效率。
c、设置动画元素position属性为fixed或absolute：由于当前元素从dom流中独立出来，因此受影响的只有当前元素。
d、牺牲平滑度满足性能：动画精度太强，会造成更多的repaint/reflow，牺牲精度，能满足性能的损耗，获取性能和平滑度的平衡。
f、避免使用table进行布局，table每个元素的大小以及内容的改变，都会导致整个table进行重新计算，造成大幅度的repaint或者reflow。改用div则可以针对性的repaint和避免不必要的reflow。
g、避免在css中使用运算式

通过 Reflow 和 Repaint 的介绍可知，每次 Reflow 比其 Repaint 会带来更多的资源消耗，因此，我们应该尽量减少 Reflow 的发生，或者将其转化为只会触发 Repaint 操作的代码。

var tipBox = document.createElement('div'); 
  document.body.appendChild('tipBox');//reflow
  var tip1 = document.createElement('div'); 
  var tip2 = document.createElement('div'); 
  tipBox.appendChild(tip1);//reflow 
  tipBox.appendChild(tip2);//reflow

如上的代码，会产生三次reflow，优化后的代码如下：

var tipBox = document.createElement('div');
tip1 = document.createElement('div'); 
tip2 = document.createElement('div'); 
tipBox.appendChild(tip1);
tipBox.appendChild(tip2); 
document.body.appendChild('tipBox');//reflow

当然还可以利用 display 来减少reflow次数

var tipBox = document.getElementById('tipBox'); 
  tipBox.style.display = 'none';//reflow 
  tipBox.appendChild(tip1);
   tipBox.appendChild(tip2);
   tipBox.appendChild(tip3); 
   tipBox.appendChild(tip4); 
   tipBox.appendChild(tip5); 
   tipBox.style.width = 120; 
   tipBox.style.height = 60; 
   tipBox.style.display = 'block';//reflow

DOM元素测量属性和方法也会触发reflow,如下：

var tipWidth = tipBox.offsetWidth;//reflow 
tipScrollLeft = tipBox.scrollLeft;//reflow 
display=window.getComputedStyle(div,'').getPropertyValue('display');//reflow