Is Virtual DOM Derived From Document Fragments?

An interview guide for DOM, document fragments, virtual DOM, React fragments, incremental DOM, and shadow DOM

Jennifer Fu
Nov 24, 2020 · 6 min read
A macro shot of a rope tied into a knot.
A macro shot of a rope tied into a knot.
Photo by Manuel Sardo on Unsplash

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:

An example of a DOM tree
An example of a DOM tree
Image credit: Wikipedia

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.

It shows two select elements side by side with Apple selected.
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.

Image for post
Image for post

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.

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Thanks to Zack Shapiro

Jennifer Fu

Written by

A seasoned frontend developer https://www.linkedin.com/in/jennifer-fu-53357b/

Better Programming

Advice for programmers.

Jennifer Fu

Written by

A seasoned frontend developer https://www.linkedin.com/in/jennifer-fu-53357b/

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store