[Из песочницы] Что такое Virtual DOM?
За последний год я много слышал о Virtual DOM и React JS.React работает действительно быстро и очень прост, но как он работает? Что такое Virtual DOM? Почему я должен беспокоиться об этом, и что случилось со старым добрым обычным DOM? Что такое DOMПеред тем, как мы начнем вникать в то, что из себя представляет DOM виртуальный, давайте немного поговорим о том, чем является DOM реальный.DOM (аббревиатура от Document Object Model) — способ представления структурного документа с помощью объектов. Это кроссплатформенное и языко-независимое соглашение для представления и взаимодействия с данными в HTML, XML и т.д. Веб-браузеры обрабатывают составляющие DOM, и мы можем взаимодействовать с ними, используя JavaScript и CSS. Мы можем работать с узлами документа, изменять их данные, удалять и вставлять новые узлы. В наши дни DOM API является практически кроссплатформенным и кроссбраузерным.Так в чем же проблема?
Проблема DOM Главная проблема DOM — он никогда не был рассчитан для создания динамического пользовательского интерфейса (UI). Мы можем работать с ним, используя JavaScript и библиотеки наподобие jQuery, но их использование не решает проблем с производительностью.Посмотрите на современные социальные сети, такие как Twitter, Facebook или Pinterest.После небольшого скроллинга, мы будем иметь десятки тысяч DOM-узлов, эффективно взаимодействовать с которыми — задача не из легких.Для примера, попробуйте переместить 1000 div-блоков на 5 пикселей влево.Это может занять больше секунды — это слишком много для современного интернета. Вы можете оптимизировать скрипт и использовать некоторые приемы, но в итоге это вызовет лишь головную боль при работе с огромными страницами и динамическим UI.
Можем ли мы решить эту проблему? Похоже, что можем.В настоящее время W3C работает над новым стандартом Shadow DOM.Shadow DOM — это рабочий черновик стандарта W3C. Спецификация, описывающая метод объединения нескольких DOM-деревьев в одну иерархию и как эти деревья взаимодействуют друг с другом в пределах документа, что позволяет лучше скомпоновать DOM.
Другой вариант заключается в использовании подхода с Virtual DOM.Virtual DOM не является стандартом и в конечном итоге мы по-прежнему взаимодействуем с DOM, но делаем это как можно реже и более эффективно.
Virtual DOM Вместо того, чтобы взаимодействовать с DOM напрямую, мы работаем с его легковесной копией. Мы можем вносить изменения в копию, исходя из наших потребностей, а после этого применять изменения к реальному DOM.При этом происходит сравнение DOM-дерева с его виртуальной копией, определяется разница и запускается перерисовка того, что было изменено.Такой подход работает быстрее, потому как не включает в себя все тяжеловесные части реального DOM.Но только если мы делаем это правильно. Есть две проблемы: когда именно делать повторную перерисовку DOM и как это сделать эффективно.
Когда? Когда данные изменяются и нуждается в обновлении.Есть два варианта узнать, что данные изменились:
Первый из них — «dirty checking» (грязная проверка) заключается в том, чтобы опрашивать данные через регулярные промежутки времени и рекурсивно проверять все значения в структуре данных. Второй вариант — «observable» (наблюдаемый) заключается в наблюдении за изменением состояния. Если ничего не изменилось, мы ничего не делаем. Если изменилось, мы точно знаем, что нужно обновить. Как? Что делает этот подход действительно быстрым: Эффективные алгоритмы сравнения Группировка операций чтения/записи при работе с DOM Эффективное обновление только под-деревьев Как вы понимаете, это не так просто и реализация может оказаться довольно сложной, но есть некоторые библиотеки, которые помогают реализовать этот подход в наших проектах.Одной из таких самых известных библиотек является React от команды разработчиков Facebook.React JS React JS — это JavaScript-библиотека, разработанная в Facebook для создания пользовательских интерфейсов, которая популяризировала идею использования виртуального DOM. React создает легковесное дерево из JavaScript-объектов для имитации DOM-дерева. Затем он создает из них HTML, который вставляется или добавляется к нужному DOM-элементу, что вызывает перерисовку страницы в браузере.React — это библиотека, а не фреймворк, поэтому сравнивать его с Angular или Ember некорректно.Другие библиотеки и фреймворки virtual-dom — реализация Virtual DOM от Matt Esch, алгоритм сравнения отличий. Mithril — Javascript-фреймворк для создания ярких приложений. Bobril — Компонент-ориентированный фреймворк, вдохновленный подходами Mithril и ReactJs. cito.js — JavaScript-фреймворк для создания быстрых, масштабируемых и модульных веб-приложений. Вывод Virtual DOM — это техника и набор библиотек / алгоритмов, которые позволяют нам улучшить производительность на клиентской стороне, избегая прямой работы с DOM путем работы с легким JavaScript-объектом, имитирующем DOM-дерево.Идея с использованием виртуального DOM отличная, хотя и не нова — мы давно знали, что прямая работа с DOM обходится дорого. Используя библиотеки наподобие React, мы можем повысить производительность приложений и сделать это очень просто.
От переводчика Оригинальная статья: What is Virtual DOMПримечание: при переводе допущены некоторые вольности, но в рамках разумного.
