Наиболее эффективные способы отображения массивов в виде 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

Что касается удаления, я не знаю ни одного способа, который был бы действительно эффективным, все известные мне вариации оказали значительное влияние на производительность.

Для создания создайте одну строку html и установите ее как свойство innerHTML в большинстве случаев с наименьшим влиянием на производительность. Вы будете выполнять все вызовы метода createElement () и все вызовы .append (), позже вы получите доступ к DOM и, как правило, значительно снизите производительность.

Вот пример того, как вы можете улучшить свой код:

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

Answer 2

Никогда, никогда, никогда не обновляйте 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);