September 29, 2019
Below is the description from MDN:
The DocumentFragment interface represents a minimal document object that has no parent. It is used as a lightweight version of Document that stores a segment of a document structure comprised of nodes just like a standard document. The key difference is that because the document fragment isn’t part of the active document tree structure, changes made to the fragment don’t affect the document, cause reflow, or incur any performance impact that can occur when changes are made.
This means the DocumentFragment API is the go to way to append multiple elements that do not need to be immediately rendered to the page.
const docFrag = new DocumentFragment();
Thats all it takes to make a document fragment!
const div1 = document.createElement('div');const div2 = document.createElement('div');const div3 = document.createElement('div');document.body.appendChild(div);document.body.appendChild(p1);document.body.appendChild(p2);
Everytime you append a child to a rendered portion of the browser, you are rerendering the page with each
appendChild() call. Lets look at how we could recreate the same functionality without causing performance issues.
// Create a docFrag to add elements toconst docFrag = new DocumentFragment();const div1 = document.createElement('div');const div2 = document.createElement('div');const div3 = document.createElement('div');docFrag.appendChild(div1);docFrag.appendChild(div2);docFrag.appendChild(div3);document.body.appendChild(docFrag);
It requires 2 simple extra lines of code but will significantly change a users browser experience. Especially if you are doing something like server side rendering where you create many HTML elements via JS. This method as far as I’m aware is implemented by the major front-end frameworks like React, Vue, Angular etc.
I hope you found this useful and next time you go to append some children you reach for DocumentFragment. Its a simple and easy to understand API with so many benefits. I was very happy with how approachable it was and it was very easy to see the benefits of the API.
Written by Konnor Rogers who currently works at VeueLive as a full time developer. You should follow him on Twitter