DOM (Document Object Model) - это стандарт для представления HTML документов в виде дерева объектов, который может быть динамически изменён с помощью JavaScript без необходимости обновления всей страницы.
Главная проблема DOM — он никогда не был рассчитан для создания динамического пользовательского интерфейса UI . Мы можем работать с ним, используя JavaScript и библиотеки наподобие jQuery, но их использование не решает проблем с производительностью.
Можем ли мы решить эту проблему?
Virtual DOM - это концепция, которая используется в React для улучшения производительности при работе с пользовательским интерфейсом. Виртуальное DOM - это легковесное представление реальной DOM-структуры, которое хранится в памяти и обновляется только при необходимости.
Когда происходят изменения в пользовательском интерфейсе, React сначала обновляет виртуальное DOM, а затем сравнивает его с предыдущей версией. После сравнения React находит только те элементы, которые были изменены, и обновляет их в реальной DOM-структуре. Это позволяет избежать лишних операций обновления и повышает производительность приложения.
Таким образом, основная разница между DOM и Virtual DOM заключается в том, что DOM - это реальная структура HTML-документа, которую можно изменять и обрабатывать, а Virtual DOM - это легковесное представление реальной DOM-структуры, которое используется в React для повышения производительности и упрощения процесса разработки и обслуживания пользовательского интерфейса. Виртуальное DOM позволяет избежать лишних операций обновления и ускоряет процесс отрисовки.
Есть две проблемы: 1. Когда именно делать повторную перерисовку DOM ?
Когда данные изменяются и нуждается в обновлении.
Есть два варианта узнать, что данные изменились:
- Первый из них — «dirty checking» (грязная проверка) заключается в том, чтобы опрашивать данные через регулярные промежутки времени и рекурсивно проверять все значения в структуре данных.
- Второй вариант — «observable» (наблюдаемый) заключается в наблюдении за изменением состояния. Если ничего не изменилось, мы ничего не делаем. Если изменилось, мы точно знаем, что нужно обновить.
2. Как это сделать эффективно ?
Что делает этот подход действительно быстрым:
- Эффективные алгоритмы сравнения
- Группировка операций чтения/записи при работе с DOM
- Эффективное обновление только под-деревьев
Это не так просто и реализация может оказаться довольно сложной, но есть некоторые библиотеки, которые помогают реализовать этот подход в наших проектах.