Analysis of DOM update methods in modern web frameworks: Virtual DOM and Incremental DOM

Cover Page

Cite item

Full Text

Abstract

The article presents an analysis of modern methods for updating the Document Object Model (DOM) structure in popular client-side web frameworks such as Angular, React and Vue. The main focus is on comparing the concepts of Virtual DOM and Incremental DOM, which underlie the architectural solutions of the respective frameworks. The Virtual DOM used in React and Vue operates on a virtual tree, compares its versions in order to identify differences and minimize changes in the real DOM. This approach provides a relatively simple implementation of the reactive interface, but comes with additional costs for computing and resource usage. In contrast, Angular uses an Incremental DOM, which does not create intermediate structures: changes are applied directly through the Change Detection mechanism. This approach allows to achieve high performance through point updates of DOM elements without the need for a virtual representation. The study uses a comparative analysis of architectural approaches to updating the DOM, based on the study of official documentation, practical experiments with code and visualization of rendering processes in Angular and React. The methodology includes a theoretical justification, a step-by-step analysis of the update mechanisms and an assessment of their impact on performance. The scientific novelty of the article lies in the systematic comparison of architectural approaches to updating the DOM in leading frameworks, with an emphasis on the implementation of the signal model in Angular version 17+. The impact of using signals on the abandonment of the Zone library is analyzed in detail.js and the formation of a more predictable, deterministic rendering model, as well as lower-level performance management capabilities. The article contains not only a theoretical description, but also practical examples that reveal the behavior of updates in real-world scenarios. The nuances of template compilation, the operation of the effect() and computed() functions are also considered. The comparison of Virtual DOM and Incremental DOM makes it possible to identify key differences, evaluate the applicability of approaches depending on the tasks and complexity of the project, and also suggest ways to optimize frontend architect

References

  1. Бетеев К.Ю., Муратова Г.В. Концепция virtual dom в библиотеке react.js // Инженерный вестник Дона. – 2022. – № 3. – С. 170-180. EDN: LHOOOS.
  2. Incremental DOM [Электронный ресурс]. URL: https://github.com/google/incremental-dom (дата обращения: 16.04.2025).
  3. Introducing Incremental DOM [Электронный ресурс]. URL: https://medium.com/google-developers/introducing-incremental-dom-e98f79ce2c5f (дата обращения: 12.04.2025).
  4. Understanding Angular Ivy: Incremental DOM and Virtual DOM [Электронный ресурс]. URL: https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36 (дата обращения: 16.04.2025).
  5. Разбираемся в Angular Ivy: Incremental DOM и Virtual DOM [Электронный ресурс]. URL: https://habr.com/ru/articles/448048/ (дата обращения: 03.03.2025).
  6. Virtual DOM vs Incremental DOM in Angular [Электронный ресурс]. URL: https://www.angularminds.com/blog/virtual-dom-vs-incremental-dom-in-angular (дата обращения: 17.02.2025).
  7. Angular Документация [Электронный ресурс]. URL: https://angular.dev/api/core/ChangeDetectionStrategy (дата обращения: 16.04.2025).
  8. Довженко М.И., Готская И.Б. Анализ способов реализации алгоритма отслеживания изменений в одностраничных веб-приложениях // Альманах научных работ молодых ученых XLVII научной и учебно-методической конференции Университета ИТМО. Том 7. – 2018. – С. 123-126. EDN: YXNFSH.
  9. Исходный код примеров [Электронный ресурс]. URL: https://stackblitz.com/edit/6meb5pyu?file=src%2Fmain.ts (дата обращения: 16.04.2025).
  10. Zone.js [Электронный ресурс]. URL: https://github.com/angular/angular/tree/main/packages/zone.js (дата обращения: 16.04.2025).

Supplementary files

Supplementary Files
Action
1. JATS XML

Согласие на обработку персональных данных с помощью сервиса «Яндекс.Метрика»

1. Я (далее – «Пользователь» или «Субъект персональных данных»), осуществляя использование сайта https://journals.rcsi.science/ (далее – «Сайт»), подтверждая свою полную дееспособность даю согласие на обработку персональных данных с использованием средств автоматизации Оператору - федеральному государственному бюджетному учреждению «Российский центр научной информации» (РЦНИ), далее – «Оператор», расположенному по адресу: 119991, г. Москва, Ленинский просп., д.32А, со следующими условиями.

2. Категории обрабатываемых данных: файлы «cookies» (куки-файлы). Файлы «cookie» – это небольшой текстовый файл, который веб-сервер может хранить в браузере Пользователя. Данные файлы веб-сервер загружает на устройство Пользователя при посещении им Сайта. При каждом следующем посещении Пользователем Сайта «cookie» файлы отправляются на Сайт Оператора. Данные файлы позволяют Сайту распознавать устройство Пользователя. Содержимое такого файла может как относиться, так и не относиться к персональным данным, в зависимости от того, содержит ли такой файл персональные данные или содержит обезличенные технические данные.

3. Цель обработки персональных данных: анализ пользовательской активности с помощью сервиса «Яндекс.Метрика».

4. Категории субъектов персональных данных: все Пользователи Сайта, которые дали согласие на обработку файлов «cookie».

5. Способы обработки: сбор, запись, систематизация, накопление, хранение, уточнение (обновление, изменение), извлечение, использование, передача (доступ, предоставление), блокирование, удаление, уничтожение персональных данных.

6. Срок обработки и хранения: до получения от Субъекта персональных данных требования о прекращении обработки/отзыва согласия.

7. Способ отзыва: заявление об отзыве в письменном виде путём его направления на адрес электронной почты Оператора: info@rcsi.science или путем письменного обращения по юридическому адресу: 119991, г. Москва, Ленинский просп., д.32А

8. Субъект персональных данных вправе запретить своему оборудованию прием этих данных или ограничить прием этих данных. При отказе от получения таких данных или при ограничении приема данных некоторые функции Сайта могут работать некорректно. Субъект персональных данных обязуется сам настроить свое оборудование таким способом, чтобы оно обеспечивало адекватный его желаниям режим работы и уровень защиты данных файлов «cookie», Оператор не предоставляет технологических и правовых консультаций на темы подобного характера.

9. Порядок уничтожения персональных данных при достижении цели их обработки или при наступлении иных законных оснований определяется Оператором в соответствии с законодательством Российской Федерации.

10. Я согласен/согласна квалифицировать в качестве своей простой электронной подписи под настоящим Согласием и под Политикой обработки персональных данных выполнение мною следующего действия на сайте: https://journals.rcsi.science/ нажатие мною на интерфейсе с текстом: «Сайт использует сервис «Яндекс.Метрика» (который использует файлы «cookie») на элемент с текстом «Принять и продолжить».