如何减少 reflow(回流)和 repaint(重绘)

1. 避免在 document 上直接进行频繁的 DOM 操作,如果确实需要可以采用 off-document 的方式进行,具体的方法包括但不完全包括以下几种:

● 先将元素从 document 中删除,完成修改后再把元素放回原来的位置;

● 将元素的 display 设置为 "none",完成修改后再把 display 修改为原来的值;

● 如果需要创建多个 DOM 节点,可以使用 DocumentFragment 创建完后一次性的加入 document。

2. 集中修改样式:

● 尽可能少的修改元素 style 上的属性;

● 尽量通过修改 className 来修改样式;

● 通过 cssText 属性来设置样式值;

3. 缓存 Layout 属性值:

● 对于 Layout 属性中非引用类型的值(数字型),如果需要多次访问则可以在一次访问时先存储到局部变量中,之后都使用局部变量,这样可以避免每次读取属性时造成浏览器的渲染。

4. 设置元素的 position 为 absolute 或 fixed:

● 在元素的 position 为 static 和 relative 时,元素处于 DOM 树结构当中(文档流中),当对元素由于某个操作需要重新渲染时,浏览器会渲染整个页面。将元素的 position 设置为 absolute 和 fixed 则可以使元素从 DOM 树结构中脱离出来独立的存在,而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素,从而在某种程度上缩短浏览器渲染时间,这在当今越来越多的 JavaScript 动画方面尤其值得考虑。

5. 权衡速度的平滑:

● 比如实现一个动画,以1个像素为单位移动这样最平滑,但 reflow 就会过于频繁,CPU 很快就会被完全占用。如果以3个像素为单位移动就会好很多。

6. 不要用tables布局:

● 不要用 tables 布局的另一个原因就是 tables 中某个元素一旦触发 reflow 就会导致 table 里所有的其它元素 reflow。在适合用 table 的场合,可以设置 table-layout 为 auto 或 fixed,这样可以让 table 一行一行的渲染,这种做法也是为了限制 reflow 的影响范围。

7. 不要在 CSS 里面写 expression:

● 很多情况下都会触发 reflow,如果 CSS 里有 expression,则每次都会重新计算一遍。

原文地址:https://www.cnblogs.com/jQing/p/2753315.html