Является ли Shadow DOM быстрым, как Virtual DOM в React.js?

Ответы:

125

Виртуальный DOM

Виртуальная модель DOM позволяет избежать ненужных изменений в модели DOM, которые требуют больших затрат производительности, поскольку изменения в модели DOM обычно вызывают повторный рендеринг страницы. Виртуальная модель DOM также позволяет собирать несколько изменений для одновременного применения, поэтому не каждое отдельное изменение вызывает повторный рендеринг, а вместо этого повторный рендеринг происходит только один раз после применения набора изменений к DOM.

Теневой DOM

Shadow dom - это в основном инкапсуляция реализации. Один настраиваемый элемент может реализовать более или менее сложную логику в сочетании с более или менее сложной DOM. Целое веб-приложение произвольной сложности может быть добавлено на страницу с помощью импорта, <body><my-app></my-app>а также могут быть реализованы более простые повторно используемые и компонуемые компоненты в виде настраиваемых элементов, где внутреннее представление скрыто в теневой DOM, например <date-picker></date-picker>.

Инкапсуляция стилей Shadow DOM также предотвращает случайное применение стилей к элементам, которые дизайнер не намеревался делать, например, из-за того, что используемый вами CSS или библиотека компонентов изменили селектор, который теперь применяется к другим элементам, использующим те же имена классов CSS. Стили, добавленные к компонентам, ограничиваются этим компонентом, и исключение стилей или их вставка предотвращается.

Shadow DOM и производительность

Несмотря на то, что теневая модель DOM в первую очередь не связана с производительностью, она также влияет на производительность. Поскольку стили ограничены областью действия, браузер может делать предположения о некоторых изменениях, влияющих только на ограниченную область страницы (теневой DOM настраиваемого элемента), что может ограничить повторный рендеринг областью такого компонента вместо повторного рендеринга. всю страницу.

Это является причиной того, что >>>, /deep/и ::shadowCSS комбинаторы, что позволило применить стили к границам тени DOM, были устаревшими и подлежат быть удалены в ближайшее время от Chrome (другие браузеры не имели их AFAIK). Само существование этих комбинаторов препятствует оптимизации, упомянутой в предыдущем абзаце.

Angular2 использует преимущества обоих миров.

Он использует однонаправленный поток данных и запускает обнаружение изменений только в модели. При обнаружении изменений он вызывает DOM обновлять путем обновления привязок и сделать структурные директивы как *ngFor, *ngIf... обновить DOM. Следовательно, DOM обновляется только тогда, когда модель действительно изменилась.

Angular2 использует теневую DOM (только с ViewEncapsulation.Nativeкоторой в настоящее время не используется по умолчанию) для использования возможностей инкапсуляции стилей, предоставляемых браузером, или (текущее значение по умолчанию) просто имитирует инкапсуляцию стилей, переписывая стили, добавленные к компонентам, в качестве обходного пути до тех пор, пока нативные теневые DOM и переменные CSS (для динамических глобальных изменений стиля) становятся широко доступными.

Гюнтер Цохбауэр
источник
8
... и DOM не медленный. Вы. korynunn.wordpress.com/2013/03/19/the-dom-isnt-slow-you-are
Маттиа Асторино 02
какой-нибудь практический ответ мог бы добавить больше смысла.
Код
@Code Что вы упускаете из виду? Вопросы по производительности обычно вообще бессмысленны. Если вам действительно нужно знать, создайте тест, охватывающий ваш вариант использования.
Гюнтер Цохбауэр,
70

Нет, Shadow DOM и Virtual DOM не связаны между собой, хотя имеют несколько схожие названия:

Виртуальный DOM: Реагируйте на концепцию хранения двух копий DOM (оригинальной и обновленной) по разным причинам. Перед рендерингом React сравнивает два объекта, чтобы определить, следует ли применить обновление (я) к фактическому дереву DOM. Это приводит к повышению производительности, поскольку мы обновляем только те части представления, которые этого требуют, а не весь экран.

Shadow DOM: часть спецификации веб-компонентов, предложенная W3C, которая в основном позволяет инкапсулировать меньшие элементы DOM и стили CSS в один элемент DOM:

Пример элемента Shadow DOM

<video width="300" height="150" />

Однако на <video>самом деле инкапсулирует следующие элементы:

<div>
   <input type="button" style="color: blue;">Play
   <input type="button" style="color: red;">Pause
   <source src="myVideo.mp4">
</div>

Так с помощью Shadow DOM, мы можем скрыть детали реализации нашего веб - элемента, и передавать только по необходимой информации для суб-элементов (то есть height, width), которые, возможно , смутно, сильно напоминает ReactJS идиома перехода propsк компонентам .

Информация предоставлена ​​через :

люкс
источник
Вы имеете в виду, что производительность Shadow DOM аналогична DOM, но она просто инкапсулирована?
Hmoo_oomH
3
@Hmoo_oomH Насколько я понимаю, Shadow DOM больше предназначен для удобства чтения - поскольку мы скрываем детали реализации сложных веб-элементов за элементом более высокого порядка (например <video>), но при этом не ожидается увеличения производительности.
люкс,