javascript - 我可以用 javascript 编写更高效的代码吗？

Question

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

Javascript代码是这样使用纯语法的，请问有没有人做一个更高效的逻辑？

Answer 1

您在每次迭代时都会触发浏览器回流，这会严重降低性能，您应该这样做:

var docFragment = document.createDocumentFragment(); // creates empty fragment
for (var i = 1; i <= 1000; ++i) {
    var el = document.createElement('div');
    el.innerHTML = 'Node ' + i;
    docFragment.appendChild(el);
}
document.getElementById('nodeHolder').appendChild(docFragment);

通过这种方式，您只需修改一次 dom。
尝试测量执行时间，您会发现巨大的差异。
这是一个有趣的 article关于优化 Javascript Dom 操作。