Shadow DOM швидкий, як віртуальний DOM в React.js?

Question 1

Чи реалізація Shadow DOM у моїх проектах зробить їх швидшими, як віртуальна DOM, яка використовується React?

Question 2

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

Віртуальний DOM - це уникнення непотрібних змін у 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/і ::shadowCSS комбінатори, що дозволило застосувати стилі до кордонів тіні DOM, були застарілими і підлягають бути видалені в найближчим часом від Chrome (інші браузери не мали їх AFAIK). Саме існування цих комбінаторів перешкоджає тому виду оптимізації, який згаданий у попередньому параграфі.

Angular2 використовує переваги обох світів.

Він використовує односпрямований потік даних і запускає виявлення змін лише на моделі. При виявленні змін він викликає DOM оновлювати шляхом поновлення прив'язок і зробити структурні директиви як *ngFor, *ngIf... оновити DOM. Тому DOM оновлюється лише тоді, коли модель фактично змінилася.

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

Question 3

Ні, Shadow DOM і Virtual DOM не пов’язані між собою, хоча дещо схожими назвами:

Віртуальний DOM: реагуйте на концепцію збереження двох копій DOM (оригіналу та оновлення) з різних причин. Перед візуалізацією React відрізняє два об’єкти, щоб визначити, чи слід застосовувати оновлення до фактичного дерева DOM. Це призводить до підвищення продуктивності, оскільки ми оновлюємо лише ті частини подання, які цього потребують, а не весь екран.

Shadow 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до компонентів .

Інформація надається через :