Почему вставка в виртуальный dom быстрее вставки в обычный?

Question

[KirylLapouski]

Быстрее ли ровна одно изменение в виртуальном dom, чем такое же изменение в реальном? Почему?

Answer 1

[Антон Спирин]

Вы должны понимать, что когда происходит рендер React компонента происходят следующие вещи:
1. расчет нового узла Virtual DOM
2. добавление по полученной Virtual DOM модели элеменов в реальный DOM
когда же происходит перерендер React компонента, происходит примерно следующие:
1. расчет новой версии узла Virtual DOM
2. сверка ее со старой
3. при необходимости вносятся изменения в реальный DOM

Поэтому ваш вопрос поставлен некорректно. Если изменить Virtual DOM, не изменив после этого обычный, изменений на Веб-странице вы не увидите. Так как это лишь объект в памяти вашего приложения:

{
  type: 'ul', props: { 'class': 'list' }, children: [
    { type: 'li', props: {}, children: ['item 1'] },
    { type: 'li', props: {}, children: ['item 2'] }
  ]
}

Сам React изменяет DOM медленней, чем если бы вы изменяли его напрямую. Так как помимо самого изменения DOM, надо рассчитать новую версию Virtual DOM, сравнить со старой и только потом внести изменения. Об этом можете почитать в статьях ниже.

Статьи по теме:
Почему Virtual DOM медленней
Бенчмарк
Как работает Virtual DOM
Как написать ваш собственный виртуальный DOM

Answer 2

[Stalker_RED]

Потому что при вставке в обычный происходит reflow и/или repaint.
Какие-то части страницы перерисовываются, а это нагрузка и время.
По этой-же причине при вставке в обычный DOM выгоднее собрать большой кусок и вставить в один прием, вместо множественной вставки мелких элементов.