Virtual DOM

Virtual DOM (wirtualny DOM) to technika stosowana przez nowoczesne frameworki JavaScript do wydajnego aktualizowania interfejsu. Jest to lekka reprezentacja struktury strony przechowywana w pamięci — kopia rzeczywistego drzewa DOM, którą framework może szybko tworzyć i porównywać, zanim wprowadzi jakiekolwiek zmiany na stronie widocznej dla użytkownika.

Dlaczego powstał

Rzeczywisty DOM, czyli struktura elementów strony, jest kosztowny w modyfikacji: każda bezpośrednia zmiana może wymusić ponowne obliczenie układu i przerysowanie fragmentów interfejsu. Gdy stan aplikacji zmienia się często, ręczne i nieuporządkowane operacje na DOM szybko stają się wąskim gardłem wydajności. Wirtualny DOM rozwiązuje ten problem, przenosząc pracę do pamięci, gdzie porównania są tanie.

Jak działa mechanizm porównywania

Gdy zmienia się stan aplikacji, framework buduje nową wersję wirtualnego DOM i porównuje ją z poprzednią w procesie zwanym różnicowaniem (diffing). Ustala w ten sposób minimalny zestaw zmian, a następnie nanosi na rzeczywisty DOM tylko te fragmenty, które faktycznie się różnią, zamiast przebudowywać całą stronę. Na tym modelu opierają się m.in. React i Vue.js. Dla programisty oznacza to wygodę: opisuje, jak interfejs ma wyglądać dla danego stanu, a framework sam dba o efektywne wprowadzenie zmian. Warto pamiętać, że wirtualny DOM nie jest magicznie najszybszy zawsze — jego przewaga ujawnia się przy złożonych, często aktualizowanych interfejsach. Dla użytkownika końcowego cały ten mechanizm pozostaje niewidoczny — objawia się jedynie płynnością i responsywnością interfejsu, nawet gdy stan aplikacji zmienia się bardzo często.