DocumentFragmenttest

JavaScript performance comparison

Test case created by Sebastian Müller

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 = "";
};
</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(['<li>', item.text, '</li>'].join(''));
    });

    // Set list items via innerHTML
    document.querySelector('ul').innerHTML = join_items.join('');
    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:

    1 comment

    Gage commented :

    WOW how did Maxthon 4.0.5 beat everybody?

    Add a comment