將數組呈現為HTML的最有效方法

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;