«Модель DOM работает медленно», - говорят они. Многие из нас подвергли сомнению это понятие и поставили несколько тестов, которые показывают, насколько быстрыми могут быть операции DOM. Однако действительно верно, что в большинстве случаев плохая производительность во время выполнения связана (и, по-видимому, вызвана) одной или несколькими модификациями DOM. Так что здесь не так?

Прежде всего позвольте мне сказать вам следующее: модель DOM не медленная. Добавление и удаление узла DOM - это (по крайней мере, теоретически) просто вопрос замены указателей. Если честно, это ничем не отличается от установки свойства для объекта.

Каждый раз, когда наш код JavaScript касается модели DOM, в дереве устанавливается грязный бит

Недостающий фрагмент головоломки называется макет. Если мы не будем очень осторожны, прикосновение к DOM запустит весь конвейер рендеринга: вычисление стилей, макет, рисование и композитинг. По сути, всякий раз, когда наш код JavaScript касается DOM, в дереве устанавливается грязный бит; затем, как только браузер вернет управление, ему необходимо выяснить, что изменилось, возможно, пересчитать, где что-то должно быть (пере) нарисовано. Мы мало что можем сделать, чтобы ограничить объем этого дорогостоящего процесса, часть из пары довольно полезных примитивов CSS.

Но не теряйте надежды!

По всем этим причинам некоторым действительно умным людям пришла в голову отличная идея: виртуальная модель DOM. По сути, это меньшее и более простое представление DOM, которое находится в памяти и полностью отделено от фактического дерева. Таким образом, вы можете изменять vDOM, не обращая внимания на браузер.

Одна из библиотек, которую я люблю использовать для этого, - diffhtml. В сочетании с новыми шаблонными литералами ES2015 это прекрасно, и это позволяет вам играть с Virtual DOM, как обычно, с реальной DOM. Затем diffhtml выяснит, как изменить страницу с минимальным количеством операций, и выполнит их все в пакетном режиме, избегая разбивки макета от вашего имени.

Результаты потрясающе быстрые. Большие деревья DOM - это проблема прошлого.

Эта статья является частью проекта #ASKTHEINDUSTRY, серии ежедневных бесед с представителями индустрии веб-разработки. Вы спросите, я отвечу, или найду того, кто сможет.