Regular DOM (Document Object Model)
Древовидное представление XML/HTML документа, которое является API для взаимодействия с содержанием, структурой и стилями документа. Изменения в DOM напрямую влияют на отображение страницы в браузере. Манипуляции с DOM могут быть медленными, особенно на сложных страницах, из-за перерисовки и перерасчета стилей.
Virtual DOM
Концепция в JavaScript, представляющая собой легковесное древовидное представление DOM в памяти. При изменении состояния приложения создается новый Virtual DOM. Затем он сравнивается с предыдущим Virtual DOM (процесс называется "diffing"). Определяются минимальные изменения, которые необходимо внести в Regular DOM. Эти патчи применяются к Regular DOM, что минимизирует прямое взаимодействие с ним и ускоряет обновление интерфейса, особенно в реактивных фреймворках (React, Vue).
Shadow DOM
Веб-стандарт, позволяющий инкапсулировать DOM-поддерево и стили внутри компонента. Создает изолированное Scope, которое не конфликтует с остальным DOM и стилями страницы. Используется для создания веб-компонентов.
| Особенность | Regular DOM | Virtual DOM | Shadow DOM |
|---|---|---|---|
| Назначение | Представление документа и API | Оптимизация обновлений DOM | Инкапсуляция компонентов |
| Реализация | Браузером | JavaScript библиотека/фреймворк | Браузером (Web标准) |
| Прямое влияние на UI | Да | Нет | Да (для содержимого компонента) |
| Инкапсуляция | Нет | Нет | Да |
Пример Virtual DOM (концептуально)
javascriptПример Shadow DOM (API)
javascript