Document Fragments in Vanilla JS

What are Fragments?

Fragments in simpler terms can be seen as lightweight containers consisting of web related elements such as buttons, sections, paragraphs, etc. These containers are minimal representations of the DOM object which is responsible for the whole view of the webpage including the styles and functionalities attached to it on different types of events occuring on the webpage.

Why are Fragments Used?

If we were supposed to split and rearrange our web document in a different order of the splitted elements, then how would you carry it out:

1) Split the different parts of the document and store it in an array. As specified in the order, we would start adding each element as mentioned in the order to the main document object through a looping process carried out in the array of the splitted elements and adding each splitted element in the order to the document.

2) Create a document fragment in which you start adding the splitted parts one by one in the specified order and once the parts get added to the fragment , you add the fragment to the main document object.

Both the approaches mentioned above have only one major difference: in the first one we are repeatedly adding elements to the document while in the second one we are adding elements to the fragment followed by which you add the fragment to the main document.

As far as web performance is considered, the first approach is not a good method of adding the elements to the document as too many DOM manipulations [which in this case is repeated insertion (through loop) of splitted parts into the main document] involves traversing the document multiple times and then adding the content to the nodes present in it thus modifying the main document multiple times. In case of arrays of shorter length this point of performance won't matter that much but in case of arrays of considerable length there this point can come into picture and can cause issues for the browser on which the webpage is viewed.

That's where Document Fragments come to our rescue as it is a lightweight object that allows DOM manipulations as we perform on the main DOM object. So now our worries of adding the elements to the main document are now gone with the insertion of elements process now being shifted to the fragment.

How to use Fragments in Vanilla JS:

Let's try out a small example in which we get a list of users from an API provided by Random User. Now from this list of users I want to display the email ids of the users that comes in the response from the API on the screen.

Steps:

Creating a HTML file and linking it to the Javascript file where the DOM manipulation with fragments will be written:

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <ol id="app"></ol>

    <script src="jsFilePathLink"></script>
  </body>
</html>

File to be linked to the HTML

const mainDocView = document.querySelector("#app");

This step involves receiving the list of users from the API. For this we will be using the fetch command and promise chaining to receive the response from the API

const API_URL = "https://randomuser.me/api/?results=10";

fetch(API_URL)
  .then((res) => res.json())
  .then(({ results }) => {
    console.log(results)
  });

response received:

We create a document fragment in which we will add the email ids of the users present within them. Two ways of creating a Document Fragment that can be used by us for diverting our DOM manipulations:

const documentFragment=new DocumentFragment()
// OR ------------
const documentFragment=document.createDocumentFragment()

Once the document fragment gets created, next step will involve creation as well as addition of containers or list items which have the email addresses of the users that we received as response from STEP 2 . So we make a contentGenerator function that takes the results array and executes an action that involves :
1. the creation of a list element for email id of every user present in the array.
2. Once the list element gets created, we allocate the email id of the user through the textContent attribute of the newly created list element.
3. Now once the list element gets created and filled with the email id we start adding it to the document fragment .This can be achieved through the appendChild method available with document fragment elements.

Here is a live preview of the content generator function

//using ES6 format:

const contentGenerator = (resultsGiven) => {
  resultsGiven.forEach((everyResult) => {
    const newElement = document.createElement("li");
    newElement.textContent = everyResult.email;
    documentFragment.appendChild(newElement);
  });
};

Now we push the document fragment content inside our list element through the append child method available with the list element which we defined in our HTML file and taking its reference through the id provided to the list element. This action would occur immediately after the content gets added to the document fragment inside the promise chaining.

fetch(API_URL)
  .then((res) => res.json())
  .then(({ results }) => {
    console.log(results);
    contentGenerator(results);
    mainDocView.appendChild(documentFragment);
  });

Awesome you just created a list of email addresses of different users without doing too many DOM manipulations✨✨ Just by using a lightweight container we can optimise our performance by reducing the DOM manipulations significantly.

Here is a live preview of the results from the process which we just completed.

https://codesandbox.io/s/document-fragment-demo-rslwe2

Summary:

DOM Manipulations (which occur due to insertion/deletion/modification of content on the web page) are expensive and can decrease the performance if they occur frequently.
- In order to avoid that we use a lightweight container that allows us to perform DOM operations without any much load on the browser rendering system. These lightweight containers are known as Fragments.
These Fragments can be created in Vanilla JS through document.createDocumentFragment or DocumentFragment() methods.
These fragments are really useful as whenever they are attached to the main document page which is viewed on the browser, it does not create any extra nodes that will be attached to the document which happens if we add our content in an enclosing container directly to the document.[Can inspect the HTML of the above mentioned demonstration to understand this point].

Hope you understood about the use of Fragments in Vanilla JS and how it can assist in performance improvements.

Document Fragments in Vanilla JS

Table of contents

No headings in the article.