我想更改以下 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>";
}
然后追加到目标。 这很丑，我同意，但应该跑得更快
【讨论】：
createElement 和 appendChild 本身。在另一种意义上，是的，许多浏览器神秘地解析文本的速度比 Javascript 执行 createElement 调用的速度要快。在另一种意义上，其他（较新的）浏览器的行为不同。在另一种意义上，编写在非极端情况下运行得更快的丑陋代码是你“不应该”真正做的事情（“极端”意味着图形、模拟和其他 CPU 消耗量）。只是 MHO。