Сделает ли реализация Shadow DOM в моих проектах их быстрее, чем виртуальная DOM, используемая React?
Ответы:
Виртуальный 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 (для динамических глобальных изменений стиля) становятся широко доступными.
Нет, 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к компонентам .
Информация предоставлена через :
<video>), но при этом не ожидается увеличения производительности.