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