Концепция Virtual DOM: что это и для чего используется?

Приветствую! В одной из предыдущих статьей рассказывалось о технологии DOM. Было рассмотрено, что это за технология, как браузер отображается HTML разметку на странице и как при помощи JavaScript работать с элементами, манипулировать ими, удалять и т.д.

Продолжаем изучать фронтенд технологии и в данной статье мне бы хотелось рассмотреть с вами концепцию Virtual DOM (виртуальный дом). Эта концепция практически повсеместно используется в современных фронтенд фреймворках. Поэтому, помимо того, что написано в статье что должен знать фронтенд разработчик, вы также обязаны изучить и разобраться в технологии Virtual DOM. А еще лучше, если у вас получится самостоятельно реализовать данную концепцию, хотя бы на базовом уровне

Проблема DOM дерева

В статье про DOM дерево помимо описания самой технологии, приводились примеры с манипуляций элементов. Для это использовался JavaScript и весь код состоят из того, что приходилось обращаться к конкретному элементу и как-то взаимодействовать с ним. Например, чтобы добавить дочерний элемент приходилось найти элемент по селектору (идентификатор, класс, наименование тега, либо абсолютный путь), далее создать новый элемент и при помощи методов найденного элемента в DOM положить в него новый созданный элемент.

Тут у вас может возникнуть вопрос: «И что? Это вполне нормально и логично, создали новый элемент и положили внутрь другого.» - и правда в этом механизме нет ничего такого, так можно делать. Но представим, что разрабатывается страница, на которой данные должны изменяться без перезагрузки страницы. Новые данные запрашиваются по клику кнопки и подставляются в DOM дерево. Также допустим, что данные необходимо отображать на странице в нескольких местах сразу. Тогда код JavaSript будет разрастаться до больших размеров. На каждый элемент необходимо писать конструкцию с получением этого элемента, далее при получении данных проставлять во все места. И чем больше элементов на странице, тем сложнее с ними будет работать и поддерживать динамический UI.

Также нельзя забывать и про слабые персональные компьютеры пользователей. Допустим необходимо переместить 1000 блоков div на 5 пикселей в любую сторону. Это действие может занять более одной, а то и двух секунд. В современных реалиях интернета это непозволительно долго. Потому что на каждое изменение div блока все DOM дерево будет перерисовываться, что совершенно неэффективно.

В настоящее время активно распространяется технология Shadow DOM, но эта тема для обсуждения в отдельной статье. Основная идея заключается в том, чтобы инкапсулировать часть DOM дерева внутри другого элемента. Но проблему динамической работы с DOM не решает.

На данный момент для эффективного взаимодействия с DOM применяется механизм Virtual DOM. Эта технология не является стандартом и никак не связана с технологиями браузера. Данная технология активно применяется в крупных фронтенд фреймворках. В конечном итоге все также происходит взаимодействие с DOM деревом, но делается это эффективно и меньше насколько это возможно.

Virtual DOM

Что же такое Virtual DOM? Virtual DOM – это концепция программирования, в которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «настоящим» DOM.

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

Такой подход работает гораздо быстрее, потому что позволяет минимизировать затраты на отрисовку и работу реального DOM дерева. Копией DOM дерева можно часто манипулировать, не беспокоясь о нагрузке и временных затратах. Механизм Virtual DOM может объединять изменения и выполнять их один раз все сразу. Это никак не регламентируется и закладывается в самом механизме разработчиками.

Но в концепции Virtual DOM есть два трепетных вопроса: когда именно делать повторную перерисовку реального DOM дерева? Как выполнять перерисовку эффективно?

Когда делать повторную перерисовку DOM дерева?

Здесь ответ очевиден и логичен – когда произошло изменение данных. Но как отслеживать эти изменения есть несколько вариантов:

1. Грязная проверка (Dirty checking) заключается в том, чтобы опрашивать данные через регулярный заданный промежуток времени и выполнять рекурсивную проверку всех значений в структуре данных.
2. Наблюдение (Observable) заключается в том, чтобы наблюдать за изменением состояния. Если происходит изменение состояния то, принимаются новые данные состояния и нет необходимости в рекурсивной сверке данных, так как система уже точно знает где произошли изменений. Если же изменений нет, то система простаивает и ожидает изменения.
3. Проксирование (Proxy) заключается в том, чтобы все данные состояния оборачивались в прокси-объекты и изменения происходили только через них. Благодаря этому, система получает изменения на этапе их обновления без надобности подписки на изменения.

Каждый вариант имеет место быть в современных реалиях. Выбор подхода заключается лишь в возможности эффективно реализовать на практике.

Как выполнять перерисовку DOM дерева эффективно?

Здесь нет определенных путей решений. Для эффективной перерисовки может применяться набор методик, например:

• Алгоритмы сравнения состояния данных;
• Группировка и объединение операций обновления реального DOM дерева;
• Частичное обновление DOM;
• Отложенное обновление DOM дерева;
• Эффективное обновление только дочерних элементов.

Разработка данного механизма непростая задача и реализация может оказаться достаточно сложной. Но при успешной реализации скорость работы с DOM деревом возрастает в разы, чтобы позволяет при помощи Virtual DOM разрабатывать крупные производственные пользовательские интерфейсы.

Фреймворки и библиотеки, применяющие концепцию Virtual DOM

Концепция Virtual DOM появилась на свет с выходом библиотеки React. Данная библиотека была первая, кто придумал и реализовал данный паттерн. Но на сегодняшний день больше количество фреймворков использует технологию Virtual DOM в своей реализации. Поэтому, если предстоит выбор фреймворка для реализации также можно обращать внимание на то использует ли фреймворк Virtual DOM или нет. О том как выбрать фронтенд фреймворк рассказывается в этой статье.

Ниже представлен список фреймворков и библиотек, которые применяют технологию Virtual DOM в своей реализации:

1. React.js
2. Vue.js
3. Ember.js
4. Million.js
5. Mithril.js
6. Bobril.js

Заключение

В завершение можно отметить, что технология Virtual DOM является ключевым аспектом в разработке современных веб-приложений. Этот концепт обеспечивает эффективные обновления пользовательского интерфейса и рендеринга, предоставляя удобное представление реального DOM в памяти. Разработчики могут оптимизировать производительность изменений пользовательского интерфейса благодаря использованию Virtual DOM. Эта концепция широко применяется в таких популярных фреймворках, как React, Vue и Ember. С использованием этой передовой технологии разработчики могут создавать производительные, отзывчивые и визуально привлекательные веб-приложения, максимизируя эффективность и минимизируя влияние узких мест в производительности.