O'Reilly

JavaScript DocumentFragment

By on  

One of the lessor known but incredibly useful gems within JavaScript is the DocumentFragment.  DocumentFragments allow developers to place child elements onto an arbitrary node-like parent, allowing for node-like interactions without a true root node.  Doing so allows developers to produce structure without doing so within the visible DOM -- an increase of speed is the true advantage.  Let me show you how DocumentFragments are used!

DocumentFragment Example

Let's start with a UL with which we'll inject LI's to:

<ul id="list"></ul>

DOM injections and modifications are taxing, so the fewer the interactions the better;  that's where the DocumentFragment comes in.  The first step is creating the DocumentFragment:

// Create the fragment
var frag = document.createDocumentFragment();

This DocumentFragment act like a pseudo-DOM node -- think of it as a virtual UL element, in this case.  Now it's time to add elements:

// Create numerous list items, add to fragment
for(var x = 0; x < 10; x++) {
	var li = document.createElement("li");
	li.innerHTML = "List item " + x;
	frag.appendChild(li);
}

Elements can be added to the DocumentFragment just as you could a normal DOM node.  Once the tree of DOM nodes is ready to hit the page, simply place the DocumentFragement into its parent (or other DOM placement functions):

// Mass-add the fragment nodes to the list
listNode.appendChild(frag);

Using DocumentFragments is faster than repeated single DOM node injection and allows developers to perform DOM node operations (like adding events) on new elements instead of mass-injection via innerHTML.  Keep DocumentFragment close by when performing lots of DOM operations -- it could speed up your app considerably!

Track.js Error Reporting

Recent Features

  • 5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

  • Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today’s websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • Create a Simple Dojo Accordion

    Let's be honest:  even though we all giggle about how cheap of a thrill JavaScript accordions have become on the web, they remain an effective, useful widget.  Lots of content, small amount of space.  Dojo's Dijit library provides an incredibly simply method by which you can...

  • CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Discussion

  1. But test (http://jsperf.com/out-of-dom-vs-documentfragment/3) do not show “an increase of speed” …

  2. @sergey: Probably depends on your browser, I got about 5-6 % speed gain with your test. http://imgur.com/SjHWF

  3. David

    I ran that test too, and documentFragment was slower on all my browsers.

    I’m on a Mac… documentFragment was always slower on Firefox 16.0.2 and Safari 6.0.1 (3-4 tests); and mixed results (slower and faster) on Chrome 23.

    David

  4. I’ve created revision 7 to show the improvement of using docfragments. As for differences in creating a temp element using createElement vs createDocumentFragment,

    http://stackoverflow.com/questions/3397161/should-i-use-document-createdocumentfragment-or-document-createelement

    has some explanation.

  5. wouldn’t you want to just concat a string and append that once at the end?

    • Not if you want to add events or work with nodes DOM structure.

  6. fbender

    I “fixed” the jsperf test and had a better performance with Fx 17 Mac, Chrome did not show any significant performance difference between the two options.

    http://jsperf.com/out-of-dom-vs-documentfragment/10

    As long as some browsers profit from documentFragment, everybody should use it (well, at least if you do it correctly).

  7. I updated the speed test http://jsperf.com/out-of-dom-vs-documentfragment/11 by adding test without documentFragment, but still outside of DOM. documentFragment have a limitations and sometimes can not be used.

  8. seelts

    But why do so?
    I can do something like:


    var ul = document.createElement('ul');
    var li;
    for (...) {
    li = document.createElement('li');
    ul.appendChild(li);
    }

    smth.appendChild(ul);

    What is the difference?

    • That’s a good option, but sometimes the “main” element is already in the DOM… like your “ul”.

      So you wouldn’t be appending it into in a “phantom” element, but would be rendering it in the DOM itself. That may be a problem when we are thinking about reflow and thousands of elements.

  9. I too use the same method as @seelts, and am wondering the same about performance.

  10. Even I’ve never understood the real benefit of this. Why can’t something as suggested by @seelts be used?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Making Data Management Easy with Transpose

    One problem with data collection is that we all want capture to be quick and we all want data to be organized -- but there's seldom a utility that allows both. Evernote allows note-taking but it can lose its structure...and no one wants...

  • Serve a Directory via Python

    Sometimes I'm working with a test HTML file and some JavaScript but need to work off of a served space.  In that case, I sometimes need to swap out folders within MAMP Stack which leads to a maintenance nightmare.  Bleh. I recently found out that you can...

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...