DocumentFragmenttest

JavaScript performance comparison

Revision 2 of this test case created by SanSYS

Info

http://tech.pro/tutorial/1254/9-ways-to-optimize-your-front-end-performance

Preparation code

<ul style="display:none"></ul>
<script>
Benchmark.prototype.setup = function() {
    document.querySelector('ul').innerHTML = "";
   
    if ( !Array.prototype.forEach ) {
      Array.prototype.forEach = function(fn, scope) {
        for(var i = 0, len = this.length; i < len; ++i) {
          fn.call(scope, this[i], i, this);
        }
      }
    }
};
</script>

Preparation code output

    Test runner

    Warning! For accurate results, please disable Firebug before running the tests. (Why?)

    Java applet disabled.

    Testing in unknown unknown
    Test Ops/sec
    document.createElement
    var list = document.querySelector('ul');
    var items = [{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"}];
    items.forEach(function(item) {
        // Create the LI element
        var li = document.createElement('li');
        li.innerHTML = item.text;

        // Do some normal node operations on the LI here,
        // like add classes, modify attributes, add event listeners, etc.

        // Immediately place LI into the parent UL element
        list.appendChild(li);
    });
    pending…
    documentfragment
    var frag = document.createDocumentFragment();
    var items = [{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"}];
    items.forEach(function(item) {
        // Create the LI element
        var li = document.createElement('li');
        li.innerHTML = item.text;

        // Do some normal node operations on the LI here,
        // like add classes, modify attributes,
        // add event listeners, add child nodes, etc.

        // *Instead place the LI into the fragment*
        frag.appendChild(li);
    });

    // Lastly, mass-inject all list items via the DocumentFragment
    document.querySelector('ul').appendChild(frag);
    pending…
    html string
    var htmlStr = '';
    var items = [{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"}];

    items.forEach(function(item) {
        // Build the string
        htmlStr += '<li>' + item.text + '</li>';
    });

    // Set list items via innerHTML
    document.querySelector('ul').innerHTML = htmlStr;
    pending…
    html string with join
    var htmlStr = '';
    var items = [{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"}];
    var join_items = [];

    items.forEach(function(item) {
        // Build the string
        join_items.push(item.text);
    });

    // Set list items via innerHTML
    document.querySelector('ul').innerHTML = '<li>' + join_items.join('</li><li>') + '</li>';
    pending…
    document.createElement with createTextNode
    var list = document.querySelector('ul');
    var items = [{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"}];
    items.forEach(function(item) {
        // Create the LI element
        var li = document.createElement('li');
        li.appendChild(document.createTextNode(item.text))

        // Do some normal node operations on the LI here,
        // like add classes, modify attributes, add event listeners, etc.

        // Immediately place LI into the parent UL element
        list.appendChild(li);
    });
    pending…
    documentFragment with createTextNode
    var frag = document.createDocumentFragment();
    var items = [{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"},{text:"a"}];
    items.forEach(function(item) {
        // Create the LI element
        var li = document.createElement('li');
        li.appendChild(document.createTextNode(item.text))

        // Do some normal node operations on the LI here,
        // like add classes, modify attributes,
        // add event listeners, add child nodes, etc.

        // *Instead place the LI into the fragment*
        frag.appendChild(li);
    });

    // Lastly, mass-inject all list items via the DocumentFragment
    document.querySelector('ul').appendChild(frag);
    pending…

    Compare results of other browsers

    Revisions

    You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

    0 comments

    Add a comment