Является ли shadow DOM быстрым, как виртуальный DOM в React.Джей?
реализация Shadow DOM в моих проектах сделает их быстрее, как виртуальный DOM, который используется React?
3 ответа:
виртуальный дом
Virtual DOM позволяет избежать ненужных изменений в DOM, которые являются дорогостоящими с точки зрения производительности, поскольку изменения в 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 (другие браузеры никогда не имели их AFAIK). Само существование этих комбинаторов предотвращает вид оптимизации, упомянутый в предыдущем абзаце.Angular2 использует преимущества обоих миров.
он использует однонаправленный поток данных и запускает обнаружение изменений только на модели. Если он обнаруживает изменения, он вызывает обновление DOM путем обновления Привязок и создания структурных директив, таких как
*ngFor,*ngIf, ... обновить дом. Поэтому DOM обновляется только тогда, когда модель фактически изменилась.Angular2 использует shadow DOM (только с
ViewEncapsulation.Nativeкоторый в настоящее время не является стандартным), чтобы использовать возможности инкапсуляции стиля, предоставляемые браузером, или (текущее значение по умолчанию) просто эмулировать инкапсуляцию стиля путем перезаписи стилей, добавленных к компонентам, в качестве обходного пути, пока собственные теневые переменные DOM и CSS (для динамических глобальных изменений стиля) не станут широко доступными.
нет, Shadow DOM и Virtual DOM не связаны, хотя и имеют несколько схожее название:
виртуальный дом: React концепция сохранения двух копий DOM (оригинал и обновленный) по разным причинам. Перед рендерингом React различает два объекта, чтобы определить, следует ли применять обновление(ы) к фактическому дереву DOM. Это приводит к повышению производительности, так как мы обновляем только те части представления, которые этого требуют, а не весь экран.
теневой DOM: часть веб-компоненты как предложено W3C, что в основном позволяет инкапсулировать меньшие элементы DOM и стили CSS в один элемент 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к компонентам.информация, предоставляемая через: