Wirtualny DOM to koncepcja programowania, w której idealna lub „wirtualna” reprezentacja UI jest przechowywana w pamięci i zsynchronizowana z „rzeczywistym” DOM.
Generalnie biblioteki i frameworki, które zapewniają funkcjonalność wirtualnego DOM, implementują wirtualne drzewo węzłów UI i podczas procesu zmiany lub ponownego renderowania, sprawdzą nowe drzewo węzłów ze starszym drzewem węzłów, które stanowi wirtualny DOM, a następnie wywołają interfejs API przeglądarki, aby ponownie renderować tylko tę część, która została zmieniona.
Abyście mogli lepiej to zrozumieć, pokażę Wam to na przykładzie rzeczywistym 🙂
Powyższy przykład to po prostu ponowne renderowanie zawartości elementu div z root ID. Więc jeśli widzicie w narzędziach programistycznych przeglądarki coś takiego, to może Wam się ukazać następujący widok.
Kliknij na grafikę aby zobaczyć animację
Tak więc cała zawartość katalogu głównego jest renderowana za każdym razem.
Teraz użyjmy reakcji, aby zrobić to samo
Czas sprawdzić renderowanie elementów w narzędziach programistycznych przeglądarki i zobaczyć, co otrzymamy …
Kliknij na grafikę aby zobaczyć animację
Domyślam się, że widzieliście wirtualną magię DOM na powyższym przykładzie. Frameworki ioraz biblioteki, takie jak Vue i React, używają do tego celu wirtualnego DOM.
Virtual DOM zapewnia nam zoptymalizowany proces aktualizacji i swobodę, nie „myśląc” zbytnio o procesie renderowania (nawet jeśli ponownie renderujemy cały UI w rzeczywistości ponownie renderowana jest zmiana), ale ponieważ zawsze jest jakaś cena do zapłacenia, a tutaj ceną jest zużyciu dużej ilości pamięci podczas przechowywania kopii domeny DOM i sprawdzania różnicy za każdym razem, gdy coś jest ponownie renderowane.
Maulik Desai – Zawsze uśmiechnięty programista, specjalizujący się w szybkim tworzeniu niestandardowych aplikacji internetowych. Zawsze chętny do nauki nowych technologii i koncepcji oraz dzielenia się wiedzą.