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

来源：互联网发布：sql怎么删除置顶列编辑：程序博客网时间：2024/05/22 10:33

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!