DOM Sweet DOOM

Sweet

DOM

Delay	User perception
0-100ms	Instant
100-300ms	Small perceptible delay
300-1000ms	Machine is working
1.000+ ms	Likely mental context switch
10.000 ms	Task is abandoned

^{Source: Ilya Grigorik - High Performance Browser Networking}

Inner Html DOM API

Mary had a little lamb. It's fleece was white as snow.

10000 times

var html = []; ++iters; while (--iters > 0) { html[html.length] = content.string; } document.getElementById('innerhtml').innerHTML = html.join('');

var frag = document.createDocumentFragment(); ++iters; while (--iters > 0) { frag.appendChild(content.dom.cloneNode(true)); } document.getElementById('domnodes').appendChild(frag);

Частый подход.

^{Source: Roman Dvornov - Не бойся, это всего лишь данные... просто их много}

Вот клево.

^{Source: Roman Dvornov - Не бойся, это всего лишь данные... просто их много}

Как сделать.

Как-то так.

ReactJS

Исходное состояние к первому

Создать узел: <div className="first"><span>A Span</span></div>

Первое ко второму

Заменить атрибут: className="first" на className="second"
Заменяем узел: <span>A Span</span> на <p>A Paragraph</p>

Второе к конечному

Удалить узел: <div className="second"><p>A Paragraph</p></div>

Нахождение минимального количества модификаций между двумя произвольными деревьями — задача O(n^3). Как вы могли догадаться, это неособо подходит для наших задач, поэтому React использует простой и весьма эффективный эвристический метод для нахождения аппроксимации, которая позволяет добиться сложности алгоритма, приближенной к O(n). React просто сравнивает деревья по внутренним узлам. Это радикально меняет сложность алгоритма и не является большой потерей, т.к. в веб-приложениях нам очень редко приходится заниматься «вертикальным»(по разным уровням) перемещением внутреннего узла. Обычно мы перемещаем узлы «горизонтально»(на одном уровне).