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 将强制浏览器完全 re-parse 内部的 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 不会强制容器 re-parse 它的任何元素。

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

Javascript: Does Inner HTML update during the forloop or after the entire loop is run?

javascript

for-loop

innerhtml