Virtual DOM

<h2 id="history">History</h2>
The JavaScript DOM API has historically been inconsistent across browsers, clunky to use, and difficult to scale for large projects. While libraries like <a href="/facts/JQuery/YIqFG0ww">jQuery</a> aimed to improve the overall consistency and ergonomics of interacting with HTML,<a class="footnote-ref" id="fnref:6" href="#fn:6">6</a> it too was prone to repetitive code that didn't describe the nature of the changes being made well and decoupled logic from markup.
The release of <a href="/facts/AngularJS/vwI5s4aJ">AngularJS</a> in 2010 provided a major paradigm shift in the interaction between JavaScript and HTML with the idea of dirty checking.<a class="footnote-ref" id="fnref:7" href="#fn:7">7</a> Instead of imperatively declaring and destroying event listeners and modifying individual DOM nodes, changes in variables were tracked and sections of the DOM were invalidated and rerendered when a variable in their scope changed. This digest cycle provided a framework to write more declarative code that coupled logic and markup in a more logical way.
While AngularJS aimed to provide a more declarative experience, it still required data to be explicitly bound to and watched by the DOM, and performance concerns were cited over the expensive process of dirty checking hundreds of variables.<a class="footnote-ref" id="fnref:8" href="#fn:8">8</a> To alleviate these issues, <a href="/facts/React_(JavaScript_library)/wEllNzoY">React</a> was the first major library to adopt a virtual DOM in 2013, which removed both the performance bottlenecks (since diffing and reconciling the DOM was relatively cheap) and the difficulty of binding data (since components were effectively just objects).<a class="footnote-ref" id="fnref:9" href="#fn:9">9</a> Other benefits of a virtual DOM included improved security since XSS was effectively impossible and better extensibility since a component's state was entirely encapsulated.<a class="footnote-ref" id="fnref:10" href="#fn:10">10</a> Its release also came with the advent of <a href="/facts/JSX_(JavaScript)/fcj05K78">JSX</a>, which further coupled HTML and JavaScript with an XML-like syntax extension.
Following React's success, many other web frameworks copied the general idea of an ideal DOM representation in memory, such as <a href="/facts/Vue.js/AojblWPD">Vue.js</a> in 2014, which used a template compiler instead of JSX and had fine-grained reactivity built as part of the framework.<a class="footnote-ref" id="fnref:11" href="#fn:11">11</a>
In recent times, the virtual DOM has been criticized for being slow due to the additional time required for diffing and reconciling DOM nodes.<a class="footnote-ref" id="fnref:12" href="#fn:12">12</a> This has led to the development of frameworks without a virtual DOM, such as <a href="/facts/Svelte/8SWHklmI">Svelte</a>, and frameworks that edit the DOM in-place such as <a href="/facts/Angular_(web_framework)/tkAQu3A3">Angular 2</a>.

<h2 id="implementations">Implementations</h2>
<h3>React</h3>
<a href="/facts/React_(JavaScript_library)/wEllNzoY">React</a> pioneered the use of a virtual DOM to make components declaratively. Virtual DOM nodes are constructed using the createElement() function, but are often transpiled from <a href="/facts/JSX_(JavaScript)/fcj05K78">JSX</a> to make writing components more ergonomic.<a class="footnote-ref" id="fnref:13" href="#fn:13">13</a> In class-based React, virtual DOM nodes are returned from the render() function, while in functional hook-based components, the return value of the function itself serves as the page markup.

<h3>Vue.js</h3>
<a href="/facts/Vue.js/AojblWPD">Vue.js</a> uses a virtual DOM to handle state changes, but is usually not directly interacted with; instead, a compiler is used to transform HTML templates into virtual DOM nodes as an implementation detail.<a class="footnote-ref" id="fnref:14" href="#fn:14">14</a> While Vue supports writing <a href="/facts/JSX_(JavaScript)/fcj05K78">JSX</a> and custom render functions,<a class="footnote-ref" id="fnref:15" href="#fn:15">15</a> it's more typical to use the template compiler since a build step isn't required that way.

<h3>Svelte</h3>
<a href="/facts/Svelte/8SWHklmI">Svelte</a> does not have a virtual DOM, with its creator Rich Harris calling the virtual DOM "pure overhead".<a class="footnote-ref" id="fnref:16" href="#fn:16">16</a> Instead of diffing and reconciling DOM nodes at runtime, Svelte uses compile-time reactivity to analyze markup and generate JavaScript code that directly edits the HTML, drastically increasing performance.<a class="footnote-ref" id="fnref:17" href="#fn:17">17</a>

<h2 id="see-also">See also</h2>
<ul><li><a href="/facts/Shadow_DOM/zQzBNnef">Shadow DOM</a></li></ul>

<h2 id="references">References</h2>

<ol>
<li id="fn:1">"Beginning Elm". Elm Programming. Retrieved 2020-12-11. <a href="http://elmprogramming.com/" target="_blank">http://elmprogramming.com/</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></li>
<li id="fn:2">"Virtual DOM and Internals – React". reactjs.org. Retrieved 2020-12-11. <a href="https://reactjs.org/docs/faq-internals.html" target="_blank">https://reactjs.org/docs/faq-internals.html</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></li>
<li id="fn:3">"React: The Virtual DOM". Codecademy. Retrieved 2020-12-11. <a href="https://www.codecademy.com/articles/react-virtual-dom" target="_blank">https://www.codecademy.com/articles/react-virtual-dom</a> <a href="#fnref:3" class="footnote-back-ref">↩</a></li>
<li id="fn:4">google/incremental-dom, 2020-12-08, retrieved 2020-12-11 <a href="https://github.com/google/incremental-dom" target="_blank">https://github.com/google/incremental-dom</a> <a href="#fnref:4" class="footnote-back-ref">↩</a></li>
<li id="fn:5">"React Virtual DOM vs Incremental DOM vs Ember's Glimmer: Fight". Auth0 - Blog. Retrieved 2020-12-11. <a href="https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/" target="_blank">https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/</a> <a href="#fnref:5" class="footnote-back-ref">↩</a></li>
<li id="fn:6">openjsf.org, OpenJS Foundation-. "The jQuery Object | jQuery Learning Center". Retrieved 2024-11-11. <a href="https://learn.jquery.com/using-jquery-core/jquery-object/" target="_blank">https://learn.jquery.com/using-jquery-core/jquery-object/</a> <a href="#fnref:6" class="footnote-back-ref">↩</a></li>
<li id="fn:7">"Make Your Own AngularJS, Part 1: Scopes And Digest". 2014-01-30. Archived from the original on 2014-01-30. Retrieved 2024-11-11.{{cite web}}: CS1 maint: bot: original URL status unknown (link) <a href="https://web.archive.org/web/20140130084907/http://teropa.info/blog/2013/11/03/make-your-own-angular-part-1-scopes-and-digest.html" target="_blank">https://web.archive.org/web/20140130084907/http://teropa.info/blog/2013/11/03/make-your-own-angular-part-1-scopes-and-digest.html</a> <a href="#fnref:7" class="footnote-back-ref">↩</a></li>
<li id="fn:8">Utley, Tatum. "The death of AngularJS and why you should care". blog.core10.io. Retrieved 2024-11-11. <a href="https://blog.core10.io/2019/04/10/the-death-of-angularjs" target="_blank">https://blog.core10.io/2019/04/10/the-death-of-angularjs</a> <a href="#fnref:8" class="footnote-back-ref">↩</a></li>
<li id="fn:9">JSConf (2013-10-30). Pete Hunt: React: Rethinking best practices -- JSConf EU. Retrieved 2024-11-11 – via YouTube. <a href="https://www.youtube.com/watch?v=x7cQ3mrcKaY" target="_blank">https://www.youtube.com/watch?v=x7cQ3mrcKaY</a> <a href="#fnref:9" class="footnote-back-ref">↩</a></li>
<li id="fn:10">"Why did we build React? – React Blog". legacy.reactjs.org. Retrieved 2024-11-11. <a href="https://legacy.reactjs.org/blog/2013/06/05/why-react.html" target="_blank">https://legacy.reactjs.org/blog/2013/06/05/why-react.html</a> <a href="#fnref:10" class="footnote-back-ref">↩</a></li>
<li id="fn:11">"Reactivity in Depth — Vue.js". v2.vuejs.org. Retrieved 2024-11-11. <a href="https://v2.vuejs.org/v2/guide/reactivity.html#How-Changes-Are-Tracked" target="_blank">https://v2.vuejs.org/v2/guide/reactivity.html#How-Changes-Are-Tracked</a> <a href="#fnref:11" class="footnote-back-ref">↩</a></li>
<li id="fn:12">Harris, Rich (2018-12-27). "Virtual DOM is pure overhead". svelte.dev. Retrieved 2024-11-11. <a href="https://svelte.dev/blog/virtual-dom-is-pure-overhead" target="_blank">https://svelte.dev/blog/virtual-dom-is-pure-overhead</a> <a href="#fnref:12" class="footnote-back-ref">↩</a></li>
<li id="fn:13">"Writing Markup with JSX – React". react.dev. Retrieved 2024-11-11. <a href="https://react.dev/learn/writing-markup-with-jsx" target="_blank">https://react.dev/learn/writing-markup-with-jsx</a> <a href="#fnref:13" class="footnote-back-ref">↩</a></li>
<li id="fn:14">"Rendering Mechanism". Vue.js. <a href="https://vuejs.org/guide/extras/rendering-mechanism.html" target="_blank">https://vuejs.org/guide/extras/rendering-mechanism.html</a> <a href="#fnref:14" class="footnote-back-ref">↩</a></li>
<li id="fn:15">"Render Functions & JSX". Vue.js. <a href="https://vuejs.org/guide/extras/render-function.html" target="_blank">https://vuejs.org/guide/extras/render-function.html</a> <a href="#fnref:15" class="footnote-back-ref">↩</a></li>
<li id="fn:16">Dec 27 2018, Rich Harris Thu (27 December 2018). "Virtual DOM is pure overhead". svelte.dev. Retrieved 2020-12-11.{{cite web}}: CS1 maint: numeric names: authors list (link) <a href="https://svelte.dev/blog/virtual-dom-is-pure-overhead" target="_blank">https://svelte.dev/blog/virtual-dom-is-pure-overhead</a> <a href="#fnref:16" class="footnote-back-ref">↩</a></li>
<li id="fn:17">Harris, Rich (2019-04-22). "Svelte 3: Rethinking reactivity". svelte.dev. Retrieved 2024-11-11. <a href="https://svelte.dev/blog/svelte-3-rethinking-reactivity" target="_blank">https://svelte.dev/blog/svelte-3-rethinking-reactivity</a> <a href="#fnref:17" class="footnote-back-ref">↩</a></li>
</ol>

Virtual DOM open-in-new

Virtual DOM