jQuery.html() vs jQuery.append() vs innerHTML vs insertAdjacentHTML (v10)

Revision 10 of this benchmark created on

Description

checking how best to insert shy of a template

Preparation HTML

<script src="//code.jquery.com/jquery-git2.js"></script>

<div id="test-wrapper"><span id="text">text</span></div>

Setup

var one = 'String Item 1';
    var two = 'String Item 2';
    var three = 'String Item 3';
    var four = 'String Item 4';
    var five = 'String Item 5';
    
    var string = '<div class="entry" id="' + one + '">' +
        '<a class="bookmark" href="' + two + '" title="' + three + '" >' +
                '<div class="imgwrapper"><div class="image" style="background-image:url(' + four + ')" /></div>' +
                '<table class="details">' +
                '<tr>' +
                '<td class="edit" title="Edit"><span class="foundicon-edit"></span></td>' +
                '<td class="title"><div>' + five + '</div></td>' +
                '<td class="remove" title="Remove"><div class="foundicon-remove"></div></td>' +
                '</tr>' +
                '</table>' +
                '</div>' +
        '</a>' +
    '</div>';
    
    var array = ['<div class="entry" id="' , one , '">' ,
        '<a class="bookmark" href="' , two , '" title="' , three , '" >' ,
                '<div class="imgwrapper"><div class="image" style="background-image:url(' , four , ')" /></div>' ,
                '<table class="details">' ,
                '<tr>' ,
                '<td class="edit" title="Edit"><span class="foundicon-edit"></span></td>' ,
                '<td class="title"><div>' , five , '</div></td>' ,
                '<td class="remove" title="Remove"><div class="foundicon-remove"></div></td>' ,
                '</tr>' ,
                '</table>' ,
                '</div>' ,
        '</a>' ,
    '</div>'].join('');
    
    var parsed_string = $.parseHTML(string);
    var parsed_array = $.parseHTML(array);

Teardown


    $('#test-wrapper').empty();
    $('#test-wrapper').html("");

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery append string
for (var i = 0; i < 20; i++) {
 $('#test-wrapper').append(string);
}
ready
jQuery append array
for (var i = 0; i < 20; i++) {
 $('#test-wrapper').append(array);
}
ready
innerHTML string
for (var i = 0; i < 20; i++) {
 document.getElementById("test-wrapper").innerHTML += string;
}
ready
innerHTML array
for (var i = 0; i < 20; i++) {
 document.getElementById("test-wrapper").innerHTML += array;
}
ready
insertAdjacentHTML string
for (var i = 0; i < 20; i++) {
 document.getElementById("test-wrapper").insertAdjacentHTML('beforeend', string);
}
ready
insertAdjacentHTML array
for (var i = 0; i < 20; i++) {
 document.getElementById("test-wrapper").insertAdjacentHTML('beforeend', array);
}
ready
jQuery parsed string
for (var i = 0; i < 20; i++) {
 $('#test-wrapper').append(parsed_string);
}
ready
jQuery parsed array
for (var i = 0; i < 20; i++) {
 $('#test-wrapper').append(parsed_array);
}
ready
Hybrid parsed string
for (var i = 0; i < 20; i++) {
 $(document.getElementById('test-wrapper')).append(parsed_string);
}
ready
Hybrid parsed array
for (var i = 0; i < 20; i++) {
 $(document.getElementById('test-wrapper')).append(parsed_array);
}
ready
Hybrid direct parse
for (var i = 0; i < 20; i++) {
 $(document.getElementById('test-wrapper')).append($.parseHTML(string));
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.