浏览器中，JS 带来的reflow 和 repaint

repaint 发生在：在视觉上不引起位置布局改变的操作。如：更改element 的背景、边框颜色等

reflow 发生在：与repaint相反，只用引起页面布局发生改变的操作，就会引发reflow。此外：获取布局有关的属性，也会引发reflow事件。如：offsetTop, offsetLeft, offsetWidth, offsetHeight – scrollTop, scrollLeft, scrollWidth, scrollHeight – clientTop, clientLeft, clientWidth, clientHeight。

reflow 和repaint 会大量消耗cpu计算能力，导致页面反映变慢，影响用户体验。所有很有必要减少reflow和repaint数量。

方法：

1、Perform DOM manipulations off-document.

eg:

     element.style.display = "none";

     element.style.top = 50+"px";

     element.style.left = 60+"px";

     element.style.display = "block";

2、Group Style Changes

      element.style.color = "red";

      element.style.font ="12px";

改为：

    ***{color:"red";font:12px;}

    element.ClassName = "***";

3、Avoid Accidental Reflow

    ccidental Reflow element.width = "100px"; var width = element.offsetWidth; Reflow!