Javascript在appendChild方法上的效率改进

Javascript efficiency improvement on appendChild Method

本文关键字：效率 appendChild 方法 Javascript      更新时间：2023-09-26

我想修改下面的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);
}

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

创建一个文档片段并对其进行追加，然后对整个集合执行单个追加。

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 );

你可以使用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);

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

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

，然后追加到目标。它很丑，我同意，但应该运行得快得多

相关文章：