Как более эффективно работать с dom javascript?

Question

[Igor Fedorov]

Добрый день. Интересует следующий вопрос. Что более эффективно и правильно в плане производительности?

Создавать элементы таким способом:

var newLi = document.createElement('li');
newLi.className = "alert";
newLi.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";

list.appendChild(newLi);

Или таким:

var newLi = `<li class="alert"><strong>Ура!</strong> Вы прочитали это важное сообщение.</li>`
list.innerHTML = newLi;

Comments

[napa3um]

Не экономьте на спичках. Сначала напишите программу, а потом уже оптимизируйте функцию создания элементов, если вдруг столкнётесь с проблемами производительности.

Answer 1

[Даниил Колесниченко]

Имхо экономия на спичках. Чтобы эффективнее работать с DOM, используйте Vritual DOM.

Comments

[Дмитрий Беляев]

Vritual DOM медленный, очень медленный, такой медленный, что медленнее его только работа с dom в angular.js

Answer 2

[Sergei Nazarenko]

самое производительное это element.innerHTML + Join

var html = [];
for (var i = 1; i < = 1000; i++) {
  html.push('<li>Element ');
  html.push(i);
  html.push('');
}
el.innerHTML = html.join('');

Comments

[Kovalsky]

Пруф?

[Sergei Nazarenko]

Никита Полевой: замеряй и сравнивай

[Sergei Nazarenko]

Никита Полевой: wildbit.com/blog/2006/11/21/javascript-optimizatio...

[RubaXa]

2006!!! 10 лет прошло, чувак.

[Sergei Nazarenko]

RubaXa: и что ? Замерь и сравни

[RubaXa]

Я то замерял, и прекрасно знаю, что массив в этой связке лишний, конкатенация строки + `createContextualFragment` будет быстрей.

[Sergei Nazarenko]

RubaXa: упс - тока оно не работает в safari

[RubaXa]

И? Fallback в innerHTML кто-то отменил? Современные браузеры за 10 лет сделали такой скачек, что ссылаться на такие статьи глупо, очень глупо.

[Sergei Nazarenko]

RubaXa: Да причем здесь статья вообще, человек попросил доказательства я и скинул что выдал гугл, ибо смысла замерять и чет показывать как-то не виделось. а по поводу скачка да согласен скачек был но не на столько чтоб все и везде работало исклюительноб до сих пор есть фичи не поддерживаемые теми или иными браузерами и я не говорю про IE которого слава богу больше нет. И от этого зоопарка там работает тут нет никогда не уйти ибо разные компании лепят и внедряют по своему. Кто-то внедрил - а кто-то не успел. и тд

[Sergei Nazarenko]

IMHO Автор первого поста Даниил Колесниченко прав - это экономия на спичках разница 8ms - 14ms не ощутима для человека для него это все в пределах секунды.

Answer 3

[Dark Hole]

Самым быстрым вообще будет appendChild)

К тому же, злом это не считается. Злом считается:
innerHTML +=...
Проход по всему DOM'у
1000+ DOM-элементов
Не сохранение элементов в переменные, а каждый раз получения их из DOM'а

Answer 4

[Дмитрий Беляев]

Если родитель пустой, то innerHTML самое быстрое
Если в нем что-то уже есть, то вставка через documentFragment

var frag = document.createDocumentFragment();
for(let i = 0; i < 10; i++) {
  let newLi = document.createElement('li');
  newLi.className = "alert";
  newLi.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";
  frag.appendChild(newLi);
}
list.appendChild(frag);