Question

我想知道如何使循环更有效。在我的页面上它有超过100的迭代次数，这就是为什么，你可以想象它很麻烦。

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

Thanx提前获得帮助。

Answer 1

我真正建议的是获取对for：

之外的nodeHolder元素的引用

var nodeHolder = document.getElementById('nodeHolder');

 for (var i = 0; i < 1000; i += 1) {
    var el = document.createElement('div'); 
el.appendChild(document.createTextNode('Node ' + (i + 1)));
    nodeHolder.appendChild(el);
 }

或者可能使用文档片段来保存临时更改/附加，然后在循环后将其添加到nodeHolder：

var fragment = document.createDocumentFragment();

for (var i = 0; i < 1000; i += 1) {
    var el = document.createElement('div'); 
    el.appendChild(document.createTextNode('Node ' + (i + 1)));
    fragment.appendChild(el);
}

document.getElementById('nodeHolder').appendChild(fragment.cloneNode(true));

JS Fiddle showing both approaches（如果控制台可用，则计时）。

Answer 2

jQuery方式......

var d = '';
for(var i=0;i<1000;i++) d += '<div>Node ' + (i + 1) + '</div>';
$('#nodeHolder').append(d);

或者在html中的javascript ...

<div id="nodeHolder">
<script>(function() { for(var i=0;i<1000;i++) document.write('<div>Node ' + (i + 1) + '</div>'); })();</script>
</div>

Answer 3

也许：你可以在for循环中生成一个HTML字符串，如：

<div>Node 1</div><div>Node 2</div>

然后在整个循环完成后将nodeHolder的.innerHTML属性设置为此字符串。

（...让DOM渲染器弄清楚如何最好地优化动作）

Answer 4

总结：

缓存您的DOM选择器。
抛弃for循环，然后循环播放。
只将您的元素追加到DOM一次。 DOM几乎总是瓶颈。

在此模式中，您可以利用反向循环：

//Cache the DOM element
var node = document.getElementById('nodeHolder'),
    markup = [];

//Run the loop backwards for additional speed
var i = 10000;
while(i--){
  markup.push('<div>Node ' + (i + 1) + '</div>');
}

//Reverse the array, join it, then set the innerHTML
node.innerHTML = markup.reverse().join('');

工作示例：http://jsfiddle.net/ZAkMZ/3/

反向循环速度参考：https://blogs.oracle.com/greimer/entry/best_way_to_code_a

jQuery版本：

//Cache the DOM element
var node = $('#nodeHolder'),
    markup = [];

//Run the loop backwards for additional speed
var i = 10000;
while(i--){
  markup.push('<div>Node ' + (i + 1) + '</div>');
}

//Reverse the array, join it, then set the innerHTML
node.append(markup.reverse().join(''));

Answer 5

你肯定需要按照@David Thomas的建议使用DocumentFragment。我看到的效率最高的版本是...... cloneNode始终优于createElement，根据需要在浅版或深版（仍然比createEl 更快）之间切换。 / p>

并不是说它会带来显着的收益，但你应该尽可能地避开作业。仅在需要时将数据存储在变量中。当然，在可读性方面，这是另一回事。

var fragment = document.createDocumentFragment();
var tplEl = document.createElement('div');
var contentTpl = document.createTextNode('Node ');

for (var i = 1; i <= 1000; i++) {
    var curNode = contentTpl.cloneNode(false);
    curNode.nodeValue = curNode.nodeValue + i;
    tplEl.cloneNode(false).appendChild(curNode);
    fragment.appendChild(tplEl);
}

document.getElementById('nodeHolder').appendChild(fragment);

请注意，将fragment添加到nodeHolder会将fragment的所有子项添加为nodeHolder只触发1个流，而不是先前代码中的1000个流。

参考：Speeding up JavaScript

Answer 6

可能就是这样：

for (var i = 0; i < 100; i+=1) {
  $("<div/>").appendTo("body").attr({"class":'txtHolder'});
  $(".txtHolder").append(i+1);

}

如何让js“for”循环更有效率？

6 个答案: