Вставка многих дросселей элементов DOM

Question

У меня есть цикл, где я вставляю около 500 <div> с в DOM через document.getElementById(target).appendChild(docFragmentDiv), и каждый <div> имеет, вероятно, 20 или 30 потомков.Я могу вставить до 100 штук, но страница временно зависает, пока DOM обновляется, если есть что-то вроде 200+ вставок.

Как мне избежать этой дроссельной катушки?Прямо сейчас у меня установлен интервал для вставки 50 за интервал с 25 мс между интервалами.Есть ли лучший способ сделать это?

Answer 1

Вы должны использовать innerHTML, и вы должны использовать его только один раз.

Для оптимальной эффективности вы должны собрать фрагменты HTML в массив строк, используя цикл, затем написать document.getElementById(target).innerHTML = htmlPieces.join()

Answer 2

Использование innerHTML, как предполагает SLaks, будет работать, но, вероятно, лучше создать фрагмент документа, добавить к нему все ваши узлы div, а затем добавить фрагмент документа в основной документ.

var docFrag = document.createDocumentFragment ();

для (var i = 0; i
docFrag.appendChild (document.createElement ( "ДИВ"));
}

document.getElementById (мишень) .appendChild (docFrag);

Answer 3

Будьте осторожны, что вы не используете appendChild для реального документа до последнего момента. Другими словами, если вы делаете:

var div1 = document.createElement("div");
document.body.appendChild(div1);

for (var i=0; i<500; i++) {
  var div = document.createElement("div");
  div1.appendChild(div);
}

Затем вы перерисовываете всю страницу каждый раз, когда вы повторяете этот цикл.

Лучше, если вы используете методы DOM, чтобы изменить это:

var div1 = document.createElement("div");

for (var i=0; i<500; i++) {
  var div = document.createElement("div");
  div1.appendChild(div);
}

document.body.appendChild(div1);

Теперь вы рисуете свои div-ы в внеэкранный буфер и перерисовываете страницу только один раз.

Answer 4

Я не уверен, что это будет быстрее, но это будет первое, что я попробовал:

Вместо добавления их всех на страницу, добавьте их в контейнер, который вы еще не добавили на страницу, а затем добавьте этот контейнер на страницу.

Если это улучшает производительность, вы можете изменить ее в соответствии с вашими потребностями.

Answer 5

innerHtml () почти всегда быстрее, чем appendChild ().

Взгляните на тест QuirksMode для реальных чисел.

Редактировать: Есть ли причина, по которой вы добавляете их с интервалами, а не сразу? Я думаю, что SLaks правильно делать все это сразу.