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

从不,从不,从不从循环中更新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);

对于删除我不知道任何方式是真正有效的,所有的变化我知道有相当大的性能影响。

对于创建,创建一个html字符串并将其设置为innerhtml属性在大多数情况下对性能影响最小。 所有对createElement()的方法调用和所有的.append()调用,稍后将访问DOM并通常会大大降低性能。

下面是一个如何改进代码的示例:

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