Czy wdrożenie Shadow DOM w moich projektach sprawi, że będą one szybsze jak wirtualny DOM używany przez React?
Odpowiedzi:
Wirtualny DOM
Wirtualny DOM polega na unikaniu niepotrzebnych zmian w DOM, które są kosztowne pod względem wydajności, ponieważ zmiany w DOM zwykle powodują ponowne renderowanie strony. Wirtualny DOM pozwala również zebrać kilka zmian do zastosowania na raz, więc nie każda pojedyncza zmiana powoduje ponowne renderowanie, ale zamiast tego ponowne renderowanie odbywa się tylko raz po zastosowaniu zestawu zmian do DOM.
Shadow DOM
Shadow dom dotyczy głównie hermetyzacji implementacji. Pojedynczy element niestandardowy może implementować mniej lub bardziej złożoną logikę w połączeniu z mniej lub bardziej złożonym DOM. Cała aplikacja internetowa o dowolnej złożoności może zostać dodana do strony przez import, <body><my-app></my-app>ale także prostsze komponenty wielokrotnego użytku i komponowalne mogą być implementowane jako elementy niestandardowe, gdzie wewnętrzna reprezentacja jest ukryta w cieniu DOM <date-picker></date-picker>.
Hermetyzacja stylów Shadow DOM polega również na zapobieganiu przypadkowemu zastosowaniu stylów do elementów, których projektant nie zamierzał, na przykład dlatego, że używana biblioteka CSS lub komponentów zmieniła selektor, który teraz ma zastosowanie do innych elementów, które używają tych samych nazw klas CSS. Style dodane do komponentów są ograniczone do tego komponentu, co zapobiega wykrwawianiu się lub wnikaniu stylów.
Shadow DOM i wydajność
Mimo że w shadow DOM nie chodzi przede wszystkim o wydajność, ma on również wpływ na wydajność. Ponieważ style mają określony zakres, przeglądarka może przyjąć założenia dotyczące pewnych zmian, aby wpłynąć tylko na ograniczony obszar strony (cień DOM elementu niestandardowego), co może ograniczyć ponowne renderowanie do obszaru takiego komponentu, zamiast ponownego renderowania całą stronę.
To jest powód, dla którego >>>, /deep/i ::shadowkombinatorów CSS, co pozwoliło zastosować style ponad granicami cień dom, były przestarzałe i podlegają wkrótce usunięta z Chrome (innych przeglądarek nigdy ich AFAIK). Samo istnienie tych kombinatorów uniemożliwia rodzaj optymalizacji, o którym mowa w poprzednim akapicie.
Angular2 wykorzystuje zalety obu światów.
Wykorzystuje jednokierunkowy przepływ danych i uruchamia wykrywanie zmian tylko w modelu. Jeśli wykryje zmianę powoduje DOM być aktualizowane przez aktualizację i powiązań strukturalnych jak zrobić dyrektyw *ngFor, *ngIf... aktualizuje DOM. Dlatego DOM jest aktualizowany tylko wtedy, gdy model faktycznie się zmienił.
Angular2 używa shadow DOM (tylko w przypadku ViewEncapsulation.Nativektórego obecnie nie jest to opcja domyślna), aby wykorzystać możliwości enkapsulacji stylów zapewniane przez przeglądarkę lub (bieżące ustawienie domyślne) po prostu emulować hermetyzację stylów przez przepisanie stylów dodanych do komponentów, jako obejście aż do natywnych zmiennych Shadow DOM i CSS (dla dynamicznych globalnych zmian stylu) stają się szeroko dostępne.
Nie, Shadow DOM i Virtual DOM nie są ze sobą powiązane, chociaż mają podobną nazwę:
Wirtualny DOM: Reaguj na koncepcję zachowania dwóch kopii DOM (oryginalnego i zaktualizowanego) z powodów różnicowych. Przed renderowaniem, React porównuje dwa obiekty, aby określić, czy powinien zastosować aktualizację do aktualnego drzewa DOM. Skutkuje to zwiększoną wydajnością, ponieważ aktualizujemy tylko te części widoku, które tego wymagają, a nie cały ekran.
Shadow DOM: Część specyfikacji Web Components zaproponowana przez W3C, która w zasadzie pozwala na hermetyzację mniejszych elementów DOM i stylów CSS w jednym elemencie DOM:
Przykładowy element Shadow DOM
<video width="300" height="150" />
Jednak w <video>rzeczywistości zawiera następujące elementy:
<div>
<input type="button" style="color: blue;">Play
<input type="button" style="color: red;">Pause
<source src="myVideo.mp4">
</div>
Więc za pomocą cienia DOM, jesteśmy w stanie ukryć szczegóły realizacji naszej elementu internetowej i przechodzą tylko wzdłuż niezbędnych informacji do podelementów (tj height, width), które, być może mylnie, mocno przypomina ReactJS idiom przechodząc propsdo komponentów .
Informacje dostarczane przez :
<video> ), Ale nie oczekujemy wzrostu wydajności.