document.fragments vs appendChild

JavaScript performance comparison

Test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="target"></div>
<script>
Benchmark.prototype.teardown = function() {
    document.getElementById('target').innerHTML = '';
};
</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 fragment
var fragment = document.createDocumentFragment();
var li      = document.createElement('li');
        var div     = document.createElement('div');
        var p       = document.createElement('p');
        var h1      = document.createElement('h1');
        var link    = document.createElement('a');
        var imgLink = document.createElement('a');
        var img     = document.createElement('img');
     
        // update attributes
        div.className = 'overlay';
                     
        // update the hrefs
        var linkUrl = "url";
        link.href = imgLink.href = 'news/article/' + linkUrl;
     
        // add images
        img.src = "/bla.jpg";
        img.alt = "";        
           
        // update text
        p.appendChild(document.createTextNode("teser text"));
        link.appendChild(document.createTextNode("headline"));
     
        // insert all elements into place
        h1.appendChild(link);
        div.appendChild(h1);
        div.appendChild(p);
        imgLink.appendChild(img);
     
        // insert the elements in the li
        li.appendChild(div);
        li.appendChild(imgLink);
fragment.appendChild(li);
document.getElementById('target').appendChild(fragment)
pending…
jQuery && apendChild
var li      = document.createElement('li');
        var div     = document.createElement('div');
        var p       = document.createElement('p');
        var h1      = document.createElement('h1');
        var link    = document.createElement('a');
        var imgLink = document.createElement('a');
        var img     = document.createElement('img');
     
        // update attributes
        $(div).attr('class','overlay');
                     
        // update the hrefs
        var linkUrl = "url";
        link.href = 'news/article/' + linkUrl;
        imgLink.href = 'news/article/' + linkUrl;
     
        // add images
        img.src = "/bla.jpg";
        img.alt = "";        
           
        // update text
        $(p).text("teser text");
        $(link).text("headline");
     
        // insert all elements into place
        h1.appendChild(link);
        div.appendChild(h1);
        div.appendChild(p);
        imgLink.appendChild(img);
     
        // insert the elements in the li
        li.appendChild(div);
        li.appendChild(imgLink);
$('#target').append(li);
pending…
fragment & innerHTML
var fragment      = document.createDocumentFragment();

var linkUrl = "url",
     src = "/bla.jpg",
   inner = '<li><div class="overlay"><h1><a href="news/article/'+linkUrl+'">test m1</a></h1><p>test</p></div><a href="news/article'+linkUrl+'"><img src="'+src +'" alt=""></a></li>';

fragment.innerHTML = inner;
document.getElementById('target').appendChild(fragment)
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