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

67

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

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

Shadow DOM

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

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

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

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

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

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

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

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

источник

2016-04-28 05:48:04

+2

... и DOM не медленный. Вы. https://korynunn.wordpress.com/2013/03/19/the-dom-isnt-slow-you-are/ –

43

Нет, Shadow DOM и Virtual DOM не имеют никакого отношения, хотя и несколько похожими названиями:

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

Shadow DOM: Часть Web Components spec, предложенный консорциумом W3C, который в основном позволяет инкапсуляцию более мелких элементов DOM и стилей CSS в один DOM элемент:

Пример Shadow DOM Element

<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 компонентам.

Информация, представленная с помощью:

источник

2016-03-15 14:49:43 lux

+0

ли вы имеете в виду, что производительность Shadow DOM, как DOM, но это просто инкапсулируется? –

+1

@Hmoo_oomH Я понимаю, что Shadow DOM больше подходит для читаемости - поскольку мы скрываем детали реализации сложных веб-элементов за элементом более высокого порядка (например, '

+1

Спасибо, ты просто дал понять мне. –

0

Из этого теста, Полимерная дул Реагировать прочь в производительности в Chrome:

https://jsperf.com/polymer-vs-react-update/6

источник

2017-02-07 02:59:44 dman

+1

Эта страница выдает сообщение об ошибке. Uncaught ReferenceError: Полимер не определен. сообщение: Uncaught ReferenceError: Полимер не определен имя_файла https://jsperf.com/polymer-vs-react-update/6 LINENUMBER: 397 – Grumpy

+0

Я изменю импорт. Вот еще одно измерение производительности для Polymer vs Angular 2 https://vaadin.com/blog/-/blogs/simplifying-performance-with-web-components – dman

+0

Этот сайт использует очень старую версию реакции –

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

ответ

Смежные вопросы