Javascript:内部HTML是在forloop期间更新还是在整个循环运行之后更新

Question

我只是想提高我的电子商务网站在添加新项目方面的性能。我们有很多项目要显示，所以我想知道这是否可行。如有任何帮助，我们将不胜感激！

for (item of items) {
item_display_div.innerHTML += item; // Would the item_display_div only start updating here?
}
// Or here?

Answer 1

连接到元素的innerHTML将迫使浏览器完全重新解析内部的HTML标记并创建新元素。如果你在一个循环中多次这样做，可能会很昂贵。示例：

document.body.innerHTML += '<img src onerror="console.log(`img tag 1 errorred`)">';
document.body.innerHTML += '<img src onerror="console.log(`img tag 2 errorred`)">';

查看第一个<img>标记是如何被解析两次的——第一次是在第一个.innerHTML +=之后，第二次是在第二个.innerHTML +=之后。

最好使用DocumentFragment——将元素附加到片段中，然后在最后附加片段。

此外，每当您必须插入纯HTML标记时，至少可以考虑使用insertAdjacentHTML而不是.innerHTML +=——insertAdjacentHTML不会强制容器重新解析其任何元素。