Virtual DOM

Last updated

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]

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

<span class="mw-page-title-main">JavaScript</span> High-level programming language

JavaScript, often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. As of 2023, 98.7% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.

Web development is the work involved in developing a website for the Internet or an intranet. Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. A more comprehensive list of tasks to which Web development commonly refers, may include Web engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web server and network security configuration, and e-commerce development.

A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build and deploy web applications on the World Wide Web. Web frameworks aim to automate the overhead associated with common activities performed in web development. For example, many web frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse. Although they often target development of dynamic web sites, they are also applicable to static websites.

Svelte is a free and open-source front-end component framework and language created by Rich Harris and maintained by the Svelte core team members. Svelte is not a monolithic JavaScript library imported by applications: instead, Svelte compiles HTML templates to specialized code that manipulates the DOM directly, which may reduce the size of transferred files and give better client performance. Application code is also processed by the compiler, inserting calls to automatically recompute data and re-render UI elements when the data they depend on is modified. This also avoids the overhead associated with runtime intermediate representations, such as virtual DOM, unlike traditional frameworks which carry out the bulk of their work at runtime, i.e. in the browser.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

A browser speed test is a computer benchmark that scores the performance of a web browser, by measuring the browser's efficiency in completing a predefined list of tasks. In general the testing software is available online, located on a website, where different algorithms are loaded and performed in the browser client. Typical test tasks are rendering and animation, DOM transformations, string operations, mathematical calculations, sorting algorithms, graphic performance tests and memory instructions. Browser speed tests have been used during browser wars to prove superiority of specific web browsers. The popular Acid3 test is no particular speed test but checks browser conformity to web standards.

AngularJS is a discontinued free and open-source JavaScript-based web framework for developing single-page applications. It was maintained mainly by Google and a community of individuals and corporations. It aimed to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in web applications and progressive web applications.

<span class="mw-page-title-main">Elm (programming language)</span> Functional programming language

Elm is a domain-specific programming language for declaratively creating web browser-based graphical user interfaces. Elm is purely functional, and is developed with emphasis on usability, performance, and robustness. It advertises "no runtime exceptions in practice", made possible by the Elm compiler's static type checking.

<span class="mw-page-title-main">Ember.js</span>

Ember.js is an open-source JavaScript web framework that utilizes a component-service pattern. It allows developers to create scalable single-page web applications by incorporating common idioms, best practices, and patterns from other single-page-app ecosystem patterns into the framework.

Meteor, or MeteorJS, is a partly proprietary, mostly free and open-source isomorphic JavaScript web framework written using Node.js. Meteor allows for rapid prototyping and produces cross-platform code. The server-side MongoDB program is the only proprietary component of Meteor and is part of the Meteor download bundle. It is possible to use Meteor without using the server-side MongoDB. It uses the Distributed Data Protocol and a publish–subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronization code. On the client, Meteor can be used with any popular front-end JS framework, Vue, React, Svelte, Angular, or Bazel.

MontageJS is an open-source JavaScript framework for building scalable single-page applications. It aims to simplify the development and maintainability of expressive HTML5 applications by employing native application frameworks. With Montage, developers can build and extend reusable user interface components and modules, bind properties among components and controllers, and synchronise DOM updates to ensure a smooth user experience, especially on resource-constrained devices.

<span class="mw-page-title-main">React (software)</span> JavaScript library for building user interfaces

React is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies.

<span class="mw-page-title-main">React Native</span> Open-source mobile application framework

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities. It is used to develop the Android and iOS applications at Facebook, Microsoft, and Shopify. It is also being used to develop virtual reality applications at Oculus.

<span class="mw-page-title-main">Vue.js</span> Open-source JavaScript library for building user interfaces

Vue.js is an open-source model–view–viewmodel front end JavaScript library for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

Angular is a TypeScript-based, free and open-source single-page web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

This is a list of articles related to the JavaScript programming language.

Next.js is an open-source web development framework created by the private company Vercel providing React-based web applications with server-side rendering and static website generation.

In web development, hydration or rehydration is a technique in which client-side JavaScript converts a static HTML web page, delivered either through static hosting or server-side rendering, into a dynamic web page by attaching event handlers to the HTML elements. Because the HTML is pre-rendered on a server, this allows for a fast "first contentful paint", but there is a period of time afterward where the page appears to be fully loaded and interactive, but is not until the client-side JavaScript is executed and event handlers have been attached.

References

  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.