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

Bondarenko Olesya Sergeevna ORCID: 0009-0003-5477-6947 Master's degree; Faculty of Software Engineering and Computer Technology; Federal State Autonomous Educational Institution of Higher Education 'ITMO National Research University'. 195299, Russia, St. Petersburg, Kalininsky district, Prospekt Prosveshcheniya, 99 rancerenly@gmail.com

Introduction

In modern web development, it is critically important to ensure high performance and responsive interface. The increasing dynamism of data, the scalability of applications, and the complexity of state management require tools to develop innovative solutions for working with the DOM, the basic structure of any web page. The Angular framework has a unique approach: instead of using Virtual DOM, as in React and Vue, it uses a change detection mechanism, which in recent versions (v17+) is complemented by support for signals. It is these innovative solutions that make it possible to create fast-working and predictable interfaces.

The relevance of the research is justified by the development of frontend development. The constant development of technologies requires updating approaches to interface rendering. The use of signals and incremental DOM updates is an important step towards increasing the interactivity and scalability of web applications.

The purpose of this article is to review the methods of interacting with DOM in Angular, highlight the differences from Virtual DOM solutions (as in React and Vue), describe the main processes of rendering and executing update instructions, and show the advantages of reactive programming in Angular.

Change detection mechanism

One of the key features of Angular is the use of its own Change Detection mechanism, which ensures efficient synchronization of the state of components with the DOM displayed in the browser. Unlike frameworks like React or Vue, which rely on the Virtual DOM concept and use diffing algorithms, Angular takes a different approach: it tracks changes in data and directly updates only those parts of the DOM that really need it. This method minimizes redundant actions and allows you to achieve high performance, especially in complex and scalable applications.^[6]

The Change Detection mechanism works according to the following principle. Each component in Angular is associated with a data model and a template that displays that model. When data changes occur—whether it's a variable change, the result of an asynchronous operation, or user interaction—Angular initiates a check to determine which data has been changed and which parts of the DOM should be updated. This is a process called "dirty checking" — checking for "contamination" or obsolescence of data in a component.^[7]

During this process, Angular sequentially traverses the component tree, starting from the root, and checks each property associated with the template. If the framework detects a discrepancy between the current value of a property and its previous value, it starts updating the corresponding element in the DOM. This approach ensures that the information displayed is up-to-date with any changes occurring in the application.

Dirty checking Features

It is important to note that in Angular, the dirty checking process does not rely on a direct comparison of the old and new tree, as it does in the Virtual DOM. Instead, Angular relies on pre-known relationships between data and the template, defined during component compilation. Due to this, the framework can bypass only those parts of the tree where changes could potentially occur, thereby saving resources.

Because Angular tracks changes in each component and their dependencies, it is able to efficiently update the interface even in very large applications. However, it is important to properly organize the logic of the components in order to avoid redundant calls to Change Detection and unintended renderers. For example, if a component uses heavy calculations in the template, they may be performed repeatedly each time it passes Change Detection, which will negatively affect performance.

Angular traditionally uses the Zone library.js for automatically triggering the Change Detection process when asynchronous events occur, such as timers, HTTP requests, or DOM events. This library patches the standard browser APIs (for example, setTimeout, Promise) in such a way that Angular recognizes when an asynchronous operation has completed and automatically initiates a check for changes.^[10]

This approach is convenient because it allows the developer not to think about manually calling interface updates. However, the use of Zone.js can lead to an excessive number of Change Detection launches, especially in applications with intensive user interaction or a large number of asynchronous events.

To increase efficiency, Angular provides a mechanism for change detection strategies. By default, Angular uses the Default strategy, in which the entire component is checked for any change. However, when specifying the ChangeDetectionStrategy.OnPush strategy, Angular will update the component only if one of its input parameters (@Input) has changed or an event has occurred inside the component.

In addition, starting with version 17, Angular offers the use of signals as a new reactive state management mechanism. Signals allow you to explicitly describe data dependencies, as well as automatically initiate updates only in those places where changes have actually occurred. This makes the Change Detection process more predictable and granular. ^[7] Together with the effect() function, signals allow you to create logically related reactions to a change in state without affecting unnecessary components or patterns.

With the release of version 17, the principle of working with signals was introduced. Signals are reactive variables that are updated in an automatically monitored context. This allows you to get rid of cumbersome subscriptions and manual status management. The main advantages of signals are as follows:

Automatic tracking of changes. The effect() function registers code blocks that respond to signal changes, which simplifies the implementation of the update logic.

Simplicity and predictability. By applying signals, the developer gets compact and easy-to-understand code, where all changes to the data are immediately reflected in the DOM.

Performance optimization. Thanks to dot updating of the DOM, only those elements whose data has changed are updated, which minimizes redundant operations and speeds up rendering.

Let's look at the basic approach of using signals in Angular in Figure 1.:

Figure 1 — Using the Input signal in Angular

In this example, the ExampleInputComponent component is implemented, which expects the string type exampleInput input parameter. The template outputs the text "Entered text: %passed text to the % component". The parent component of the PlaygroundComponent imports the child component and defines it in its template, passing the text "Hello, world!" there.

The result of the execution is shown in Figure 2.

Figure 2 — Demonstration of the operation of the signals

Reactive programming: signals, computed, and effect

With the advent of signals, developers get a tool to create reactive variables whose values can be easily tracked and changed. Signals greatly simplify state management: when data changes, updates to dependent parts of the interface are automatically triggered. This increases the predictability of the code and reduces the likelihood of errors.

An example of using signals is given above in the ExampleInputComponent. This approach eliminates the need to manage subscriptions manually and allows Angular to independently monitor updates.

Calculated values with computed()

In addition to signals, Angular offers the calculated() function, which allows you to create calculated values based on multiple signals. This is convenient for aggregating or transforming data without duplicating logic. Consider an example:

Figure 3 — Signal usage in effect

In this example, the effect() function automatically reacts to changes in the count signal and outputs the new value to the console. This approach eliminates the need to explicitly subscribe to changes and allows the framework to independently manage the updating of values.

When clicked, we see the value changes.

Figure 4 — Demonstration of the work on the website

Using computed for derived values

In addition to signals, Angular suggests using the calculated() function, which allows you to create calculated values based on other signals. This method allows you to aggregate or transform data, minimizing duplication of logic and increasing code readability. Example of using computed():

Figure 5 — Calculated function for performing value manipulations

In this example, any change in the firstName or lastName signals will automatically recalculate the fullName, and therefore update the representation.

Comparison of approaches: Virtual DOM vs Incremental DOM

Virtual DOM is a concept used in React and Vue, which creates a virtual representation of the current state of the real DOM. When the data changes, a new version of the virtual tree is formed, after which a comparative (diffing) analysis with the previous version is performed, which makes it possible to identify a minimal set of changes.^[1] Then, only the detected differences are applied to the real DOM. This approach optimizes updates, since only the necessary parts of the interface are changed, and also abstracts away the complexity of working with the DOM, saving the developer from having to manually manage changes.^[4][5] However, the constant creation and comparison of virtual trees requires additional computing resources, which can be a problem when working with large and complex interfaces.

In contrast, Angular uses the principle of incremental DOM updates. There is no need to create a virtual copy here: the framework directly analyzes which properties have changed and updates only the relevant elements. The main advantage of this approach is the direct updating of elements, since Angular, analyzing the structure of the application, updates only the changed DOM sections. ^[2]At the same time, templates are compiled when, at the assembly stage, the source templates are converted into high-performance code with a set of ready-made instructions for updating the DOM, and using signals allows you to accurately identify dependencies by updating only those nodes that have actually changed, which significantly reduces the number of unnecessary checks.^[6][3]

The rendering process in Angular includes several steps. First, the templates are compiled when the source code is converted into a set of instructions for updating the DOM. Angular then checks for changes using the Change Detection mechanism, which allows you to determine which parts of the interface need updating. After that, an incremental update is applied: only the changed nodes are updated, which helps to save resources. Finally, the generated instructions update attributes, styles, classes, and events, ensuring that the interface is updated correctly and efficiently.^[8]

Thus, using Virtual DOM allows you to optimize updates by changing only the necessary parts, but it requires additional computing costs for creating and comparing virtual trees. Angular achieves high efficiency by directly analyzing changes and updating the DOM on the fly, which eliminates the need to create a virtual copy and significantly reduces the load on the system.

Table 1 — Comparison of Incremental DOM and Virtual DOM

Future directions of Angular development

In future versions of Angular, it is planned to continue using signals to manage changes, which will make it possible to abandon Zone.A js library that automates change detection, but creates overhead costs. Switching to full manual control of rendering using signals can make applications even more optimized and predictable.

Reactive programming is becoming the foundation of modern development. In the future, Angular will probably expand its functionality to work with data streams, improve integration with asynchronous processes, and simplify the creation of calculated values. This will allow developers to write more declarative and scalable code.

Conclusion

Angular offers a unique approach to working with the DOM, based on a mechanism for detecting changes and using signals. Instead of creating a virtual view, as in React or Vue, Angular directly updates only the changed sections of the interface. This incremental approach, combined with template compilation and pre-generated instructions, ensures high performance, minimal upgrade costs, and transparent application health management.

The use of reactive signals, effect() and computed() functions, as well as the use of services like Renderer2, allow you to create secure, scalable applications that meet the requirements of a modern web developer.

Thus, Angular's modern approach to updating the DOM not only improves performance and debugging convenience, but also opens up new opportunities for optimizing complex and dynamic web applications. Continuing its evolution towards the full integration of reactive programming and the abandonment of traditional methods, Angular remains a powerful tool in the arsenal of developers, allowing them to create fast and responsive solutions to meet the growing needs of the market.