Question

当前，我正在使用以下代码将数组呈现为HTML：

// remove all the items
while (htmlElement.firstChild) {
  htmlElement.removeChild(checkout.firstChild);
}

// re-add them + new ones
for(i of arr) {
  let item = document.createElement("div")
  htmlElement.append(item)
}

每次更改数组时，我都会运行此函数。对于较大的数组，这并不是真正有效的方法，因为我还删除/重新添加了所有未更改的项，只是为了呈现单个更改。有没有更有效，更漂亮的解决方案？

Answer 1

从不，从不，从不从循环内更新DOM。由于过度的重排和重画，这可能会破坏页面的性能。

要做的是只在内存中构建新的HTML，然后一旦构建，就可以通过一次操作将其注入DOM。

// Create an in-memory element to attach dynamically created elements to:
let div = document.createElement("div");

for(var i = 0; i < 10; i++) {
  let item = document.createElement("div")
  item.textContent = "div #" + i;
  div.append(item); // Append to in-memory node, not the DOM
}

// Now inject the completed node just once to the DOM
document.body.appendChild(div);

Answer 2

对于删除而言，我不知道任何有效的方法，我知道的所有变体都会对性能产生影响。

在创建时，创建单个html字符串并将其设置为innerHTML属性，这在大多数情况下是对性能影响最小的方式。您将对createElement（）的所有方法调用和所有.append（）调用，稍后将访问DOM并通常会大大降低性能。

以下是如何改进代码的示例：

// re-add them + new ones
var htmlString = "";
for(i of arr) {
  htmlString += "<div></div>";
}
htmlElement.innerHTML = htmlString;

将数组呈现为HTML的最有效方法

2 个答案: