提高 web 应用性能之 JavaScript 性能调优 （4）

look_w

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. 减少 reflow

1 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 减少 reflow

1 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，提高了效率。