Virtual DOM

A virtual DOM is a lightweight JavaScript representation of the Document Object Model (DOM) used in declarative web frameworks such as React, Vue.js, and Elm.[1] Updating the virtual DOM is comparatively faster than updating the actual DOM (via JavaScript)[2].[citation needed] Thus, the framework is free to make necessary changes to the virtual DOM relatively cheaply. The framework then finds the differences between the previous virtual DOM and the current one, and only makes the necessary changes to the actual DOM.[3][4]

Svelte does not have a virtual DOM, and its creator Rich Harris calls the virtual DOM "pure overhead".[5]

Related techniques include Ember.js' Glimmer and Angular's incremental DOM.[6][7]

  1. ^ "Beginning Elm". Elm Programming. Retrieved 2020-12-11.
  2. ^ "The Virtual DOM". www.learnhowtoprogram.com. Retrieved 2023-06-22.
  3. ^ "Virtual DOM and Internals – React". reactjs.org. Retrieved 2020-12-11.
  4. ^ "React: The Virtual DOM". Codecademy. Retrieved 2020-12-11.
  5. ^ 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)
  6. ^ google/incremental-dom, 2020-12-08, retrieved 2020-12-11
  7. ^ "React Virtual DOM vs Incremental DOM vs Ember's Glimmer: Fight". Auth0 - Blog. Retrieved 2020-12-11.