提高 web 应用性能之 JavaScript 性能调优 (4)
 
- UID
- 1066743
|

提高 web 应用性能之 JavaScript 性能调优 (4)
DOM 操作性能调优JavaScript 的开发离不开 DOM 的操作,所以对 DOM 操作的性能调优在 Web 开发中也是非常重要的。
Repaint 和 ReflowRepaint 也叫 Redraw,它指的是一种不会影响当前 DOM 的结构和布局的一种重绘动作。如下动作会产生 Repaint 动作:
- 不可见到可见(visibility 样式属性)
- 颜色或图片变化(background, border-color, color 样式属性)
- 不改变页面元素大小,形状和位置,但改变其外观的变化
Reflow 比起 Repaint 来讲就是一种更加显著的变化了。它主要发生在 DOM 树被操作的时候,任何改变 DOM 的结构和布局都会产生 Reflow。但一个元素的 Reflow 操作发生时,它的所有父元素和子元素都会放生 Reflow,最后 Reflow 必然会导致 Repaint 的产生。举例说明,如下动作会产生 Repaint 动作:
- 浏览器窗口的变化
- DOM 节点的添加删除操作
- 一些改变页面元素大小,形状和位置的操作的触发
减少 Reflow通过 Reflow 和 Repaint 的介绍可知,每次 Reflow 比其 Repaint 会带来更多的资源消耗,我们应该尽量减少 Reflow 的发生,或者将其转化为只会触发 Repaint 操作的代码。
参考如下代码:
清单 16. reflow 介绍1
2
3
4
5
6
| var pDiv = document.createElement(“div”);
document.body.appendChild(pDiv);----- reflow
var cDiv1 = document.createElement(“div”);
var cDiv2 = document.createElement(“div”);
pDiv.appendChild(cDiv1);----- reflow
pDiv.appendChild(cDiv2);----- reflow
|
这是我们经常接触的代码了,但是这段代码会产生 3 次 reflow。再看如下代码:
清单 17. 减少 reflow1
2
3
4
5
6
| var pDiv = document.createElement(“div”);
var cDiv1 = document.createElement(“div”);
var cDiv2 = document.createElement(“div”);
pDiv.appendChild(cDiv1);
pDiv.appendChild(cDiv2);
document.body.appendChild(pDiv);----- reflow
|
这里便只有一次 reflow,所以我们推荐这种 DOM 节点操作的方式。
关于上述较少 Reflow 操作的解决方案,还有一种可以参考的模式:
清单 18. 利用 display 减少 reflow1
2
3
4
5
6
7
8
9
10
11
12
| var pDiv = document.getElementById(“parent”);
pDiv.style.display = “none”----- reflow
pDiv.appendChild(cDiv1);
pDiv.appendChild(cDiv2);
pDiv.appendChild(cDiv3);
pDiv.appendChild(cDiv4);
pDiv.appendChild(cDiv5);
pDiv.style.width = “100px”;
pDiv.style.height = “100px”;
pDiv.style.display = “block”----- reflow
|
先隐藏 pDiv,再显示,这样,隐藏和显示之间的操作便不会产生任何的 Reflow,提高了效率。 |
|
|
|
|
|