document.fragments vs appendChild

JavaScript performance comparison

Revision 4 of this test case created

Preparation code

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

<ul id="target"></ul>
<script>
Benchmark.prototype.setup = function() {
    var data = [
        {
            "uuid": "19dhxagktxzov1u1f8f09lz53w",
            "headline": "test m1",
            "teaser": "test",
            "images": []
        },
        {
            "uuid": "jhkljsdffkoioasfjfsf",
            "headline": "Test Article",
            "teaser": "Test Article",
            "images": [
                {
                    "uuid": "jhkljsdffkoioasfjfsf1",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "test",
                    "caption": "na",
                    "credit": "Getty"
                }
            ]
        },
        {
            "uuid": "jhkljsdffkoioasfjfsf5",
            "headline": "hjkh",
            "teaser": "uih",
            "images": [
                {
                    "uuid": "jhkljsdffkoioasfjfsf",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "test",
                    "caption": "na",
                    "credit": "Action Images"
                }
            ]
        },
        {
            "uuid": "jhkljsdffkoioasfjfsf56",
            "headline": "hui",
            "teaser": "kl",
            "images": [
                {
                    "uuid": "jhkljsdffkoioasfjfsf12",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "test",
                    "caption": "na",
                    "credit": "Action Images"
                },
                {
                    "uuid": "jhkljsdffkoioasfjfsf8",
                    "type": "IMAGE_TEASER",
                    "url": "some/testing/url.jpg",
                    "altText": "test",
                    "caption": "na",
                    "credit": "Action Images"
                }
            ]
        },
        {
            "uuid": "jhkljsdffkoioasfjfsf4",
            "headline": "hkj",
            "teaser": "hkl",
            "images": [
                {
                    "uuid": "jhkljsdffkoioasfjfsf6",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "test",
                    "caption": "na",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "jhkljsdffkoioasfjfsf62",
            "headline": "ImagePickerTest",
            "teaser": null,
            "images": [
                {
                    "uuid": "jhkljsdffkoioasfjfsf35",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "Pic_8 2013 19:45",
                    "caption": "na",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "jhkljsdffkoioasfjfs454f",
            "headline": "VideoPickerTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdffkoi45oasfjfsf",
            "headline": "Australia win series in Sri Lanka_Edited",
            "teaser": "Australia have retained the Warne-Muralitharan trophy after the third Test against Sri Lanka in Colombo meandered to a draw on Tuesday.",
            "images": []
        },
        {
            "uuid": "jhkljsdffkoi12oasfjfsf",
            "headline": "Fiji ready for Samoa battle_Edited",
            "teaser": "Fiji captain Deacon Manu feels his side's battle with Samoa on Sunday is a must-win match.",
            "images": []
        },
        {
            "uuid": "jhkljsdff5koioasfjfsf",
            "headline": "Tottenham can challenge for title, says King",
            "teaser": "Former Tottenham centre-back Ledley King believes the north London club will soon challenge for the English Premier League title.",
            "images": []
        },
        {
            "uuid": "jhkljsdf6fkoioasfjfsf",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdf7fkoioasfjfsf",
            "headline": "PalLucene Mar21",
            "teaser": "zsdfgdrfsg",
            "images": [
                {
                    "uuid": "jhkl1jsdffkoioasfjfsf",
                    "type": "IMAGE_BODY",
                    "url": "some/testing/url.jpg",
                    "altText": "ja a pinta",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "jhkljsd3ffkoioasfjfsf",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "332",
                    "caption": "342",
                    "credit": "fhfghfg"
                },
                {
                    "uuid": "jhkljsdffk5oioasfjfsf",
                    "type": "IMAGE_TEASER",
                    "url": "some/testing/url.jpg",
                    "altText": "344",
                    "caption": "hgf",
                    "credit": "fhfghfg"
                }
            ]
        },
        {
            "uuid": "jhkljsdffkoioas8fjfsf",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdff5koioasfjfsf",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdffk6oioasfjfsf",
            "headline": "vcsdde",
            "teaser": null,
            "images": [
                {
                    "uuid": "jh4kljsdffkoioasfjfsf",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "perform",
                    "caption": "na",
                    "credit": "dsfas"
                },
                {
                    "uuid": "jhklj6sdffkoioasfjfsf",
                    "type": "IMAGE_TEASER",
                    "url": "some/testing/url.jpg",
                    "altText": "test1",
                    "caption": "na",
                    "credit": "bob"
                }
            ]
        },
        {
            "uuid": "jhkljsdffko8ioasfjfsf",
            "headline": "Lucene_Mon Mar 11 2013 19:34",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdffko6ioasfjfsf",
            "headline": "Verify_Delete",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdff4koioasfjfsf",
            "headline": "TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdff4koioasfjfsf",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdff6koioasfjfsf",
            "headline": "Pal_OmniSprortUpdated",
            "teaser": null,
            "images": [
                {
                    "uuid": "jhk123ljsdffkoioasfjfsf",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "Bug test",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "jhkljsd12ffkoioasfjfsf",
                    "type": "IMAGE_SOURCE",
                    "url": "some/testing/url.jpg",
                    "altText": "Bug test",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "jhkljs3dffkoioasfjfsf",
                    "type": "IMAGE_TEASER",
                    "url": "some/testing/url.jpg",
                    "altText": "PalRegTest2",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "jhkl5jsdffkoioasfjfsf",
                    "type": "IMAGE_MPU",
                    "url": "some/testing/url.jpg",
                    "altText": "PalRegTest2",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "jhklj8sdffkoioasfjfsf",
                    "type": "IMAGE_MOBILE",
                    "url": "some/testing/url.jpg",
                    "altText": "PalRegTest2",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "jhkl7jsdffkoioasfjfsf",
                    "type": "IMAGE_SOURCE",
                    "url": "some/testing/url.jpg",
                    "altText": "PalRegTest2",
                    "caption": "na",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "jhkljsdff4koioasfjfsf",
            "headline": "gfdsda",
            "teaser": null,
            "images": [
                {
                    "uuid": "jh6kljsdffkoioasfjfsf",
                    "type": "IMAGE_TEASER",
                    "url": "some/testing/url.jpg",
                    "altText": "Bug test",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "jhkljs4dffkoioasfjfsf",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "PalRegTest4",
                    "caption": "na",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "jhkljsdffkoi8oasfjfsf",
            "headline": "test 2",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsd32ffkoioasfjfsf",
            "headline": "Pal_Lucene",
            "teaser": "easer Text",
            "images": [
                {
                    "uuid": "jhkljsd12ffkoioasfjfsf",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "Bug test",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "jhklj4sdffkoioasfjfsf",
                    "type": "IMAGE_TEASER",
                    "url": "some/testing/url.jpg",
                    "altText": "PalRegTest4",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "jh654kljsdffkoioasfjfsf",
                    "type": "IMAGE_GALLERY",
                    "url": "some/testing/url.jpg",
                    "altText": "PalRegTest4",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "jhkl65jsdffkoioasfjfsf",
                    "type": "IMAGE_MPU",
                    "url": "some/testing/url.jpg",
                    "altText": "PalRegTest4",
                    "caption": "na",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "jhkljsdffkoi32oasfjfsf",
            "headline": "Verify_Delete",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdffkoi1oasfjfsf",
            "headline": "TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdffko23ioasfjfsf",
            "headline": "TeamPickerTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdffk123oioasfjfsf",
            "headline": "pal",
            "teaser": "fd",
            "images": []
        },
        {
            "uuid": "jhkljsdffk456oioasfjfsf",
            "headline": "Lucene_Wed Mar 06 2013 17:30",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdf4fkoioasfjfsf",
            "headline": "Lucene_Wed Mar 06 2013 17:19",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdff4koioasfjfsf",
            "headline": "Lucene_Wed Mar 06 2013 17:10",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdff3koioasfjfsf",
            "headline": "Lucene_Wed Mar 06 2013 17:03:37",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdf56fkoioasfjfsf",
            "headline": "Lucene_Wed Mar 06 2013 16:51:46",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdf8fkoioasfjfsf",
            "headline": "Lucene_Wed Mar 06 2013 16:31:00",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsd15ffkoioasfjfsf",
            "headline": "Lucene_Wed Mar 06 2013 16:28:54",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsd23ffkoioasfjfsf",
            "headline": "Pal_Lucene test",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljs32dffkoioasfjfsf",
            "headline": "TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdf1fkoioasfjfsf",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsd65ffkoioasfjfsf",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdf45fkoioasfjfsf",
            "headline": "tyutyu",
            "teaser": null,
            "images": [
                {
                    "uuid": "jhk56ljsdffkoioasfjfsf",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "perform",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "jhklj45sdffkoioasfjfsf",
                    "type": "IMAGE_TEASER",
                    "url": "some/testing/url.jpg",
                    "altText": "BAT_Caption",
                    "caption": "Caption",
                    "credit": "Creditdv"
                }
            ]
        },
        {
            "uuid": "jhkljsdffkoi56oasfjfsf",
            "headline": "Reja sticking with Lazio",
            "teaser": "Edy Reja has confirmed he will continue in charge of Lazio after club president Claudio Lotito rejected the coach's resignation.",
            "images": [
                {
                    "uuid": "jhklj32sdffkoioasfjfsf",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "BAT_Caption",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "jhkljs1dffkoioasfjfsf",
                    "type": "IMAGE_TEASER",
                    "url": "some/testing/url.jpg",
                    "altText": "BAT_Caption",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "jhkl6jsdffkoioasfjfsf",
                    "type": "IMAGE_GALLERY",
                    "url": "some/testing/url.jpg",
                    "altText": "BAT_Caption",
                    "caption": "na",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "jhkljsdffkoioasf32jfsf",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdffkoio15asfjfsf",
            "headline": "PalKeyword test",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdffko4ioasfjfsf",
            "headline": "fdsfs",
            "teaser": "Teaser",
            "images": [
                {
                    "uuid": "jhklj56sdffkoioasfjfsf",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "perform",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "jhklj1sdffkoioasfjfsf",
                    "type": "IMAGE_TEASER",
                    "url": "some/testing/url.jpg",
                    "altText": "pal",
                    "caption": "gfgh",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "jhkljsdffk3oioasfjfsf",
            "headline": "pal_adhoc tested",
            "teaser": "dfg",
            "images": [
                {
                    "uuid": "jhkl13jsdffkoioasfjfsf",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "BAT_Caption",
                    "caption": "Captiongb",
                    "credit": "Credit"
                },
                {
                    "uuid": "jhkljsdf56fkoioasfjfsf",
                    "type": "IMAGE_TEASER",
                    "url": "some/testing/url.jpg",
                    "altText": "pal",
                    "caption": "gfgh",
                    "credit": "na"
                },
                {
                    "uuid": "jhkljsdffko45ioasfjfsf",
                    "type": "IMAGE_GALLERY",
                    "url": "some/testing/url.jpg",
                    "altText": "pal",
                    "caption": "gfgh",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "jhkljsdffkoioa65sfjfsf",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsdff12koioasfjfsf",
            "headline": "BAT_CreateArt_test",
            "teaser": null,
            "images": [
                {
                    "uuid": "jh132kljsdffkoioasfjfsf",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "BAT_Caption",
                    "caption": "Captiongb",
                    "credit": "Credit"
                },
                {
                    "uuid": "jhklj45sdffkoioasfjfsf",
                    "type": "IMAGE_TEASER",
                    "url": "some/testing/url.jpg",
                    "altText": "perform",
                    "caption": "na",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "jhkljsdffkoio465asfjfsf",
            "headline": "BAT_CreateArt_test",
            "teaser": null,
            "images": [
                {
                    "uuid": "jhkljsd465ffkoioasfjfsf",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "perform",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "jhklj46sdffkoioasfjfsf",
                    "type": "IMAGE_TEASER",
                    "url": "some/testing/url.jpg",
                    "altText": "pal",
                    "caption": "gfgh",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "jhkljsdf4fkoioasfjfsf",
            "headline": "BAT_TimeZoneTest",
            "teaser": null,
            "images": []
        },
        {
            "uuid": "jhkljsd2ffkoioasfjfsf",
            "headline": "Pal_BAT Feb13",
            "teaser": "Teaser",
            "images": [
                {
                    "uuid": "jhk3ljsdffkoioasfjfsf",
                    "type": "IMAGE_HEADER",
                    "url": "some/testing/url.jpg",
                    "altText": "testPNG",
                    "caption": "na",
                    "credit": "na"
                },
                {
                    "uuid": "j456hkljsdffkoioasfjfsf",
                    "type": "IMAGE_TEASER",
                    "url": "some/testing/url.jpg",
                    "altText": "Martin_test",
                    "caption": "captions",
                    "credit": "na"
                },
                {
                    "uuid": "jhk3ljsdffkoioasfjfsf",
                    "type": "IMAGE_GALLERY",
                    "url": "some/testing/url.jpg",
                    "altText": "Martin_test",
                    "caption": "captions",
                    "credit": "na"
                },
                {
                    "uuid": "jhk132ljsdffkoioasfjfsf",
                    "type": "IMAGE_BODY",
                    "url": "some/testing/url.jpg",
                    "altText": "pal",
                    "caption": "gfgh",
                    "credit": "na"
                }
            ]
        },
        {
            "uuid": "jhkl13jsdffkoioasfjfsf",
            "headline": "Pal_Fixture",
            "teaser": null,
            "images": [
                {
                    "uuid": "jhkl56jsdffkoioasfjfsf",
                    "type": "IMAGE_TEASER",
                    "url": "some/testing/url.jpg",
                    "altText": "Martin_test",
                    "caption": "captions",
                    "credit": "na"
                }
            ]
        }
    ];
   
};

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(); 
    for(var i=0;i<data.length;i++){        
            var li = document.createElement('li'),
                    div = document.createElement('div'),
                    p = document.createElement('p'),
                    h1 = document.createElement('h1'),
                    link = imgLink  = document.createElement('a'),      
                    img     = document.createElement('img');
                   
            var article = data[i];
                   
            div.className = 'overlay';
                    link.href = imgLink.href = "news/article/"+article.uuid;
                    img.alt = "";
                    var src = "/di/library/bein/25/0/olympique-lyonnais-as-saint-etienne_m6bz6tpyetyh1v50s2r283jzx.jpg?t=904551678&amp;w=990&amp;quality=100&amp;cropTo=top";              
            if(article.images.length > 0){
                            var image = article.images[0];
                            src = image.url;
                            src += src.indexOf('?') === -1 ? "?w=990&quality=95&cropTo=top" : "&w=990&quality=95&cropTo=top";
                            img.alt = image.altText;
                    }
                    img.src = src;
           
            // update text
            p.appendChild(document.createTextNode(article.teaser));
            link.appendChild(document.createTextNode(article.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
    $(data).each(function(){
         
            // create the newsreader elements
            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 = this.uuid;
            link.href = 'news/article/' + linkUrl;
            imgLink.href = 'news/article/' + linkUrl;
         
            // add images
            img.src = "/di/library/bein/25/0/olympique-lyonnais-as-saint-etienne_m6bz6tpyetyh1v50s2r283jzx.jpg?t=904551678&amp;w=990&amp;quality=100&amp;cropTo=top";
            img.alt = "";
            if(this.images.length > 0) {        
              img.alt = this.images[0].altText;          
              img.src = this.images[0].url + "&w=990&quality=100&cropTo=top";
            }
               
            // update text
            $(p).text(this.teaser);
            $(link).text(this.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);  
         
            // add them to carousel
            $('#target').append(li);  
          });
    pending…
    innerHTML
     var fragmentMarkup = "";
         
          for(var i=0;i<data.length;i++){
            var article = data[i],
                href = "news/article/"+article.uuid,
                            src = "/di/library/bein/25/0/olympique-lyonnais-as-saint-etienne_m6bz6tpyetyh1v50s2r283jzx.jpg?t=904551678&amp;w=990&amp;quality=100&amp;cropTo=top",
                            alt = "";
                           
                    if(article.images.length > 0){
                            var image = article.images[0];
                            src = image.url;
                            src += src.indexOf('?') === -1 ? "?w=990&quality=95&cropTo=top" : "&w=990&quality=95&cropTo=top";
                            alt = image.altText;
                    }              
            fragmentMarkup += '<li><div class="overlay"><h1><a href="'+href+'">'+article.headline+'</a></h1><p>'+article.teaser+'</p></div>';
            fragmentMarkup += '<a href="'+href+'"><img src="'+src+'" alt="'+alt+'"></a></li>';
          }
    document.getElementById('target').innerHTML = fragmentMarkup;
    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