Правильная ссылка на статью:
Бондаренко О.С..
Анализ методов обновления DOM в современных веб-фреймворках: Virtual DOM и Incremental DOM
// Программные системы и вычислительные методы.
2025. № 2.
С. 35-43.
DOI: 10.7256/2454-0714.2025.2.74172 EDN: JCILDR URL: https://nbpublish.com/library_read_article.php?id=74172
Читать статью
Результаты процедуры рецензирования статьи:
|
EDN: JCILDR
|
Аннотация:
Статья представляет собой анализ современных методов обновления структуры Document Object Model (DOM) в популярных клиентских веб-фреймворках, таких как Angular, React и Vue. Основное внимание уделяется сравнению концепций Virtual DOM и Incremental DOM, которые лежат в основе архитектурных решений соответствующих фреймворков. Virtual DOM, применяемый в React и Vue, оперирует виртуальным деревом, сравнивает его версии с целью выявления различий и минимизации изменений в реальном DOM. Такой подход обеспечивает относительную простоту реализации реактивного интерфейса, однако сопровождается дополнительными затратами на вычисления и использование ресурсов. В отличие от него, Angular использует Incremental DOM, при котором отсутствует создание промежуточных структур: изменения применяются напрямую через механизм Change Detection. Этот подход позволяет добиваться высокой производительности за счёт точечных обновлений DOM-элементов без необходимости в виртуальном представлении. В исследовании применяется сравнительный анализ архитектурных подходов к обновлению DOM, основанный на изучении официальной документации, практических экспериментов с кодом и визуализации процессов рендеринга в Angular и React. Методология включает теоретическое обоснование, пошаговый разбор механизмов обновлений и оценку их влияния на производительность. Научная новизна статьи заключается в систематическом сопоставлении архитектурных подходов к обновлению DOM в ведущих фреймворках, с акцентом на внедрение сигнальной модели в Angular версии 17+. Подробно проанализировано влияние использования сигналов на отказ от библиотеки Zone.js и формирование более предсказуемой, детерминированной модели рендеринга, а также возможности управления производительностью на более низком уровне. Статья содержит не только теоретическое описание, но и практические примеры, раскрывающие поведение обновлений в реальных сценариях. Также рассматриваются нюансы шаблонной компиляции, работы функций effect() и computed(). Проведённое сравнение Virtual DOM и Incremental DOM позволяет выявить ключевые различия, оценить применимость подходов в зависимости от задач и уровня сложности проекта, а также предложить направления оптимизации фронтенд-архитектур.
Ключевые слова:
сигналы, Vue, React, Angular, Incremental DOM, Virtual DOM, DOM, рендеринг, диффинг, компиляция шаблонов
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
Keywords:
diffing, rendering, signals, Vue, React, Angular, Incremental DOM, Virtual DOM, DOM, template compilation