Virtual DOM

Content sourced from Wikipedia, licensed under CC BY-SA 3.0.

A virtual DOM is a lightweight in-memory copy of the real DOM used by frameworks like React and Vue. It lets the framework render updates quickly, compare the new virtual DOM with the old one (diffing), and apply only the necessary changes to the actual DOM (reconciliation). This makes it easier to build dynamic, state-driven apps, even if it isn’t always faster than writing plain JavaScript by hand.

History and others: Early web development struggled with inconsistent DOM APIs. AngularJS introduced dirty checking to auto-update the DOM when data changed, but that could be slow. React popularized the virtual DOM in 2013, solving performance problems and giving components self-contained state. React builds VDOM trees with createElement, often using JSX. Vue also uses a virtual DOM and usually relies on its template system, though JSX is possible. Svelte takes a different path: it doesn’t use a virtual DOM at all, compiling components to direct DOM updates for faster performance. Other approaches like Ember’s Glimmer and Angular’s incremental DOM offer alternative update strategies.