Is Virtual DOM Derived From Document Fragments?
An interview guide for DOM, document fragments, virtual DOM, React fragments, incremental DOM, and shadow DOM
The virtual DOM is a core concept of React. It’s a representation of the UI that’s kept in memory and synced with the actual DOM. The React DOM maintains the virtual DOM by reconciling the differences locally. The changes are inserted into the actual DOM based on the React pulling schedule.
DocumentFragment is an interface that defines the minimal document object without a parent. It’s used as a lightweight version of Document and stores DOM objects. Document fragments have no effect on the actual DOM. But their children can be added to the actual DOM on demand.
The virtual DOM and document fragments use the same concept to improve the UI performance. Is the virtual DOM derived from document fragments?
Let’s take a look at these JavaScript, React, and Angular concepts in depth.
What’s a DOM?
A document object model (DOM) is the data representation of objects that comprise the structure and content of a document on the web. A DOM is an interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. In this way, programming languages, such as JavaScript, can connect to the page.
This is an example of a DOM tree:
Do you want to evaluate performance while under the pressure of loading 1,000,000 nodes? Try out the following index.html:
The time duration varies for each run, but it's approximately 2.5 seconds.
DOM manipulation is an expensive operation. Adding/removing an element results in intermediate repaints and reflows of the content.
Why Are Document Fragments Used?
document.createDocumentFragment() creates a new empty DocumentFragment into which DOM nodes can be added to build an offscreen DOM tree. After the offscreen DOM tree is built, the child nodes of DocumentFragment can be updated to the DOM as needed.
Since a document fragment is in the memory and not part of the actual DOM, appending children to it doesn't cause page reflow (the computation of an element’s position and geometry). Likely, batching changes with fewer updates by document fragments will end up with better performance.
Here’s an example of how the document fragment is used:
The time duration varies for each run, but it’s approximately 1.5 seconds.
After appending children to the actual DOM (line 25), the document fragment becomes empty. If you want to reuse the updated contents, clone the document fragment before appending it to the DOM.
Interestingly, the empty document fragment can be reused to build future updates.
How Does a Virtual DOM Work?
Is a virtual DOM derived from document fragments?
No, a virtual DOM doesn’t use any document fragments.
Yes, a virtual DOM is derived from the concept to use an imaginary DOM for the purpose of performance improvement. However, a virtual DOM is designed for large-scale updates. It can also be applied to an environment where a DOM doesn't exist, such as Node.js. React was the first mainstream framework to use a virtual DOM. In addition, a virtual DOM has been adopted by Vue, Ember, Preact, and Mithril.
Beginning in version 16, React has been using the Fiber Architecture.
“In a UI, it’s not necessary for every update to be applied immediately; in fact, doing so can be wasteful, causing frames to drop and degrading the user experience.
Different types of updates have different priorities — an animation update needs to complete more quickly than, for example, an update from a data store.
A push-based approach requires the app (you, the programmer) to decide how to schedule work. A pull-based approach allows the framework (React) to be smart and make those decisions for you.” — React Fiber Architecture on GitHub
React is designed to have separate phases of reconciliation and rendering.
- Reconciliation: The algorithm React uses to diff one tree with another to determine which parts need to be changed. Different component types are assumed to generate substantially different trees. React won’t attempt to diff them but rather replace the old tree completely. Diffing of lists is performed using keys. Keys should be stable, predictable, and unique.
- Rendering: The process uses diff information to actually update the rendered app. It can split rendering work into chunks and spread it out over multiple frames. It uses a virtual stack frame to pause work and come back to it later, assign priority to different types of work, reuse previously completed work, and abort work if it’s no longer needed.
This separation allows the React DOM and React Native to use their own renderers while sharing the same reconciler.
Here’s an example to show the advantages of Virtual DOM. This is modified public/index.html from Create React App:
Line 30 and 31 are two side-by-side span elements.
The following is a modified src/app.js file that renders a select element in React. Beginning in React 17, React components no longer need to import React for using JSX.
The following is a modified src/index.js:
Lines 8-13 render a select element using the actual DOM.
Lines 15-20 render a select element using a virtual DOM.
It shows two select elements side by side with Apple selected.
When the update is triggered by line 23, two select elements are recreated every second.
Try to select Pear for both elements.
The left select is directly rendered to the DOM. The recreation makes it impossible to choose Pear.
The right select is rendered to the virtual DOM first. The frequent recreation happens on the virtual DOM instead of the actual DOM. Therefore, the select element works properly.
About React Fragment
To make the situation more interesting, React created a syntax to group a list of children without adding extra nodes to the DOM. This syntax is called React.Fragment. The following is an example of React.Fragment.
React.Fragment can be simplified to an empty tag:
Fragments declared with the explicit <React.Fragment> syntax may have keys. This is an example provided by the official document:
Besides the naming, fragments have nothing to do with document fragments.
What’s Incremental DOM?
Incremental DOM is a library for building up DOM trees and updating them in place when data changes. It differs from a virtual DOM approach in that no intermediate tree is created (the existing tree is mutated in place). This approach significantly reduces memory allocation and GC thrashing for incremental updates to the DOM tree, therefore increasing performance significantly in some cases.
Incremental DOM removes the additional copy of the DOM. This results in reduced memory usage, but this also results in reduced speed while looking for differences. The reduced memory usage is key for mobile or other memory-constrained devices.
Incremental DOM is primarily intended as a compilation target for templating languages such as Angular. Beginning in version 9, Angular adopted Angular Ivy, which is a compiler and runtime that uses an incremental DOM.
This is an example from the official website:
The above code would correspond to:
Using the renderPart function from above, the patch function can be used to render the desired structure into an existing Element or Document.
What’s Shadow DOM?
Shadow DOM is a technique ensuring that the code, styling, and structure are encapsulated in a separate, hidden DOM tree. Shadow DOM can be attached to an element in a DOM. The Shadow DOM is part of Web Components, a suite of different technologies to create reusable custom elements.
The following is an example of Shadow DOM:
Lines 8-18 define an element class in Shadow DOM. This class is defined as a new tag, new-number-list-element, registered to window.customElements (line 20). The newly created custom element is used at line 25.
Before Angular Ivy, the old compiler and runtime was View Engine, which used Shadow DOM.
Conclusion
We have answered the question “is a virtual DOM derived from document fragments?”
For the long answer, we’ve walked though DOMs, document fragments, the virtual DOM, React fragments, Incremental DOM, and Shadow DOM. This knowledge is useful for interviews as well as for daily coding.
Thanks for reading. I hope this was helpful. You can see my other Medium publications here.
