Подтвердить что ты не робот

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

Осуществляет ли реализация Shadow DOM в моих проектах быстрее, чем виртуальная DOM, используемая React?

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Тень DOM

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

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

Теневая DOM и производительность

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

По этой причине комбинаторы >>>, /deep/ и ::shadow CSS, которые разрешали применять стили по границам DOM-шрифта, были устаревшими и вскоре могут быть удалены из Chrome (в других браузерах их никогда не было НАСКОЛЬКО МНЕ ИЗВЕСТНО). Простое существование этих комбинаторов предотвращает оптимизацию, упомянутую в предыдущем абзаце.

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

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

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

Ответ 2

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

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

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

Пример элемента DOM 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 компонентам.

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