Virtual DOM explained

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] . 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]

Notes and References

1. Web site: Beginning Elm. 2020-12-11. Elm Programming.
2. Web site: The Virtual DOM . 2023-06-22 . www.learnhowtoprogram.com.
3. Web site: Virtual DOM and Internals – React. 2020-12-11. reactjs.org. en.
4. Web site: React: The Virtual DOM. 2020-12-11. Codecademy. en.
5. Web site: Dec 27 2018. Rich Harris Thu. Virtual DOM is pure overhead. 2020-12-11. svelte.dev. 27 December 2018 . en.
6. Web site: React Virtual DOM vs Incremental DOM vs Ember's Glimmer: Fight. 2020-12-11. Auth0 - Blog. en.