React и Vue.js используют виртуальный DOM для оптимизации производительности. Что такое теневой DOM?
Если вы используете React или Vue, возможно, вы знакомы с виртуальной DOM (объектной моделью документа). Это не следует путать с теневым DOM.
Прежде чем рассматривать виртуальный DOM и теневой DOM, вы должны иметь четкое представление об объектной модели документа.
Для этого, говоря простым языком, скажем, что
DOM представляет собой структуру вашего веб-сайта.
Если вы хотите узнать больше о том, где создается DOM, и о взаимосвязи между HTML, DOM и JavaScript, рекомендуем прочитать Что такое DOM?
Теперь, когда у нас есть некоторое представление о DOM, давайте посмотрим, что такое виртуальный DOM.
Что такое виртуальный DOM?
Вкратце, виртуальный DOM (VDOM) — это концепция программирования, при которой идеальное или виртуальное представление пользовательского интерфейса хранится в памяти и синхронизируется с реальным DOM с помощью такой библиотеки, как ReactDOM от reactjs.org. .
Другими словами, React строит логическое дерево, которое представляет фактическую структуру DOM под капотом.
Зачем нам нужны виртуальные DOM?
Виртуальный DOM — это способ решить распространенную проблему в современной сети.
В то время как приложения становятся больше, фреймворки и библиотеки имеют тенденцию слишком часто манипулировать и обновлять DOM. Это может быть дорого во многих отношениях.
Навигация по DOM становится медленнее и требует большей вычислительной мощности, что в конечном итоге влияет на производительность вашего приложения.
Например, это может сделать страницу медленнее.
Существует несколько подходов к решению этой проблемы:
- React использует виртуальный DOM и синхронизирует его с реальным DOM посредством процесса согласования.
- Angular использует механизм обнаружения изменений, чтобы увидеть, изменилось ли состояние вашего приложения и нужно ли обновлять какой-либо DOM.
- Vue также использует виртуальный DOM. Используя некоторые алгоритмы сравнения, Vue избегает повторного рендеринга всего DOM после новых изменений.
Короче говоря, давайте помнить, что виртуальный DOM — это копия реального DOM.
Сообщая React окончательное состояние DOM, которого мы хотим достичь (как должен выглядеть пользовательский интерфейс), React гарантирует, что DOM соответствует этому состоянию.
Что такое теневой дом?
Shadow DOM — это технология браузера, предназначенная для инкапсуляции, например. сохранение структуры, стиля и поведения разметки скрытыми и отделенными от остального кода на странице, чтобы разные части не конфликтовали, MDN.
Инкапсуляция ограждает некоторый код, чтобы он не конфликтовал с другим кодом на странице.
Другими словами, благодаря теневой DOM мы можем присоединять другие элементы к реальной DOM, зная, что новые элементы не будут конфликтовать с самой реальной DOM.
Примером, предложенным MDN, является тег <video>. Хотя вы видите только тег <video>tag в DOM, этот элемент содержит ряд кнопок и других элементов управления внутри своей теневой DOM.
Различия между виртуальным DOM и теневым DOM
Что можно сказать о различиях между виртуальным DOM и теневым DOM? Это немного похоже на разницу между Java и JavaScript!
Несмотря на ссылку на DOM, виртуальный DOM и теневой DOM — это разные технологии.
Виртуальный DOM используется такими библиотеками, как React и Vue, для решения проблемы изменения DOM при сохранении оптимальной производительности.
Виртуальный DOM является полной копией реального DOM и реализован поверх API-интерфейсов браузера.
Теневой DOM присущ веб-компонентам и API-интерфейсам браузера. Следовательно, его также можно использовать при использовании библиотек, таких как React и Vue, или фреймворков, таких как Angular.
Теневой DOM — это часть DOM, «огороженная» собственным веб-компонентом.
Напротив, если бы вы создавали приложение с использованием простого JavaScript, вы бы не использовали виртуальный DOM.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.
