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>";
  }

然后追加到目标。这很难看，我同意，但应该跑得快得多

在appendChild方法上提高Javascript效率

3 个答案: