виртуальный дом: 50 фото

Напомним, что виртуальный DOM – это инструмент, который позволяет нам взаимодействовать с элементами DOM более простым и производительным способом. Это Javascript-объектное представление DOM, которое мы можем изменять так часто, как нам нужно.

Виртуальный DOM — это дубликат реального DOM. Когда в приложении происходят изменения, виртуальный DOM обновляется вместо реального. React — фреймворк, который широко применяется и использует виртуальный DOM. При добавлении новых элементов в UI создается виртуальный DOM в виде дерева.

Теневой DOM (Shadow DOM) — это браузерная технология, предназначенная в основном для определения области видимости переменных и CSS в веб-компонентах. Виртуальный DOM — это концепция, реализованная библиотеками в JavaScript поверх API браузера.

Дерево виртуального DOM. Это просто JS-объект определённой структуры, который отражает состояние экрана. Далее React сравнивает новое дерево виртуального DOM со старым и строит разницу между ними («дифф», или объект, описывающий разницу между старым и новым состоянием).

Представление DOM состоит из структурированной группы узлов и объектов, которые имеют свойства и методы. По существу, DOM соединяет веб-страницу с языками описания сценариев либо языками программирования. Веб-страница – это документ. Документ может быть представлен как в окне браузера, так и в самом HTML-коде.