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