Why Virtual DOM Beats Dirty Check: Deep Dive into Frontend UI Frameworks

Introduction

The author started by noticing that Riot's source code resembles Angular's dirty‑check mechanism: each component stores an expressions array, re‑evaluates it on update, and updates the DOM only when values change. This raised the question of why Riot claims to implement a virtual DOM.

The article then outlines the topics covered:

Overview of MV* frontend frameworks and UI update concepts

Principles behind UI update mechanisms and representative frameworks

In‑depth analysis of why virtual DOM can be faster

Browser rendering mechanisms

The truth about Riot's virtual DOM implementation

Understanding Frontend Frameworks

What Frontend Developers Do

After a page loads, the frontend processes any initial data and renders it to the UI via DOM operations. User interactions (clicks, async events, Ajax, etc.) trigger handlers that update the UI or send data to the server.

Why a Framework Is Needed

Simple pages can be built with direct DOM manipulation, but complex single‑page applications require a structured architecture to improve development efficiency.

Frameworks provide solutions for code organization, data flow, and component reuse. Their core benefits include:

Modularity and componentization for reusability

Clear data flow for maintainability

Common patterns are MVC, MVP, and MVVM. In MVVM, the model and view are separated, with a vm object handling communication and logic, enabling reuse and two‑way binding.

UI and UI Frameworks

UI is essentially the view layer—HTML + CSS rendered as a DOM tree. UI frameworks offer componentization and efficient update strategies. Examples include Ember.js, ExtJS, and the widely known React.

UI Update Strategies

DOM manipulation is a major performance cost. Two typical strategies are demonstrated with code:

// 1 Update only the needed nodes
$(".findMe1").text('new text');
$(".findMe2").css('color','new color');
$(".findMe3").width('new width');

// 2 Use a template to replace a whole subtree
$(".parentNode").html(tpl({
    text: 'new text',
    color: 'new color',
    width: 'new width'
}));

Strategy 1 is straightforward but hard to maintain; Strategy 2 reduces the number of UI updates but may change unchanged parts, leading to unnecessary reflows.

Unnecessary updates can cause:

Re‑generation of the DOM tree

Loss of previously bound events

Input elements losing focus

Backbone follows Strategy 2.

Understanding Specific Frontend Frameworks

AngularJS (dirty check)

AngularJS is an MVVM framework where each component has a scope. Directives create watchers that monitor scope properties; when a change is detected, the watcher updates the UI. The change detection runs inside a $digest loop that repeatedly checks all watched properties until the model stabilizes.

Vue & Avalon (setter & getter)

These libraries use Object.defineProperty (setter/getter) to intercept property changes, similar to Angular's dirty‑check but without an explicit loop.

React (virtual DOM)

React components receive props (static) and state (dynamic), produce a virtual DOM tree, diff it against the previous tree, generate patches, and apply those patches in a single UI update after the JavaScript execution finishes.

Other Frameworks

The article briefly mentions additional frameworks (e.g., Ember, ExtJS) without detailed analysis.

Performance Considerations

Browser Rendering Optimizations

Two test cases illustrate the impact of forced reflow:

var ul = document.getElementById('list');
var e;
var s = +new Date();
for (var j = 0, l = 10000; j < l; ++j) {
    e = document.createElement('li');
    e.innerText = j;
    ul.appendChild(e);
}
console.log('>>> cost1:', +new Date() - s);

s = +new Date();
for (var k = 0, kl = 10000; k < kl; ++k) {
    e = document.createElement('li');
    e.innerText = kl;
    ul.appendChild(e);
    ul.offsetHeight; // forces reflow
}
console.log('>>> cost2:', +new Date() - s);

The second loop is ~10,000 times slower because ul.offsetHeight forces an immediate reflow. Browsers cache DOM operations and only perform reflow when necessary (e.g., when layout information is read) or after a timeout.

Native Event Loop

When an event fires, the browser executes registered callbacks in the JavaScript context. UI rendering occurs only after the JavaScript call stack is empty, effectively sharing a single thread for script execution and UI painting.

UI Update Performance Goals

Minimize reflows

Minimize UI rendering passes

Why Virtual DOM Is Faster

Both AngularJS (dirty check) and React (virtual DOM) batch all DOM work into a single JavaScript phase before the browser renders. React’s centralized diff‑and‑patch approach lets the browser apply a single, optimized update, whereas Angular’s distributed watchers can trigger many small DOM writes and repeated reflows.

React also separates store computation from DOM manipulation, avoiding the “store‑induced” cascades that can cause endless digest loops in Angular.

Riot’s Take on the Problem

What Riot Solves

Riot addresses two pain points of React: JSX complexity and library size. It adopts a web‑component style of bundling HTML, CSS, and JavaScript, and implements a coarse‑grained virtual DOM.

Each Riot tag holds an expressions array and mirrors a component hierarchy. Updates are performed via a single dirty‑check pass (no watchers, no store), making the process similar to React’s one‑round update.

Conclusion

The article focused on UI updates , covering browser rendering, performance bottlenecks, and the core design of several popular frontend frameworks. By analyzing these frameworks through the lens of UI update strategies, the author gained deeper insight into their architectures and highlighted why virtual DOM‑based approaches generally deliver better performance.