javascript - appendChild 方法的 Javascript 效率改进

Question

我想更改以下 Java 脚本以提高效率

for(var i = 0; i < 1000; i += 1){
                var el = document.createElement('div');
                el.appendChild(document.createTextNode('Node ' + (i + 1)));
                document.getElementById('nodeHolder').appendChild(el);
}

理想情况下，如果可以提供其背后的原因，将不胜感激。

任何想法将不胜感激。

Answer 1

创建一个文档片段并附加到该片段，然后对整个集合进行一次附加。

var frag = document.createDocumentFragment();

for(var i = 0; i < 1000; i += 1){
    var el = document.createElement('div');
    el.appendChild(document.createTextNode('Node ' + (i + 1)));
    frag.appendChild(el);
}

document.getElementById('nodeHolder').appendChild( frag );

现在你getElementById只需要运行一次，DOM 只需要更新一次。

文档片段是一个通用容器。将它附加到 DOM 时，容器就消失了，只附加了它的内容。

---

如果您愿意，可以稍微压缩一下代码：

示例：http: //jsfiddle.net/7hagb/

var frag = document.createDocumentFragment();

for(var i = 0; i < 1000; i += 1){
    frag.appendChild(document.createElement('div'))
        .appendChild(document.createTextNode('Node ' + (i + 1)));
}

document.getElementById('nodeHolder').appendChild( frag );

---

此外，一个非常小的优化将摆脱i + 1，并修改for循环以提供您想要的值。

示例：http: //jsfiddle.net/7hagb/1/

var frag = document.createDocumentFragment();

for(var i = 1; i <= 1000; i += 1){
    frag.appendChild(document.createElement('div'))
        .appendChild(document.createTextNode('Node ' + i));
}

document.getElementById('nodeHolder').appendChild( frag );

Answer 2

您可以使用 DocumentFragment，这是一个轻量级节点容器，当您在其上附加节点时，它可以防止 DOM 刷新和重排。

var nodeHolder = document.createElement('div'),
    fragment = document.createDocumentFragment();
for (var i = 0; i < 1000; i ++ ) {
    var el = document.createElement('div');
    el.innerHTML = 'Node ' + (i + 1);
    fragment.appendChild(el);
}
nodeHolder.appendChild(fragment);

Answer 3

不要使用 DOM，只需使用 html 代替。例如代替 createElement 使用

  abc = ""
  for(...){
  abc += "<div>Text " + i + "</div>";
  }

然后附加到目标。我同意，这很丑，但应该跑得更快