documentFragment appendChild vs jquery append (v30)

Revision 30 of this benchmark created on

Preparation HTML

<div id="test-area" style="height: 75px; width: auto; overflow:scroll">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Setup

var div = $('#test-area').
            css({backgroundColor: '#f00'}),
        div0 = div[0],
        loopCount = 1000;

Teardown


    div.empty();

Test runner

Ready to run.

Testing in
TestOps/sec
appendChild fragment
var span = document.createElement('span'),
    fragment = document.createDocumentFragment(),
    clone;

span.style.backgroundColor = '#fff';
span.style.margin = '2px';

for (var i = 0; i < loopCount; i++) {
    clone = span.cloneNode(true);
    clone.appendChild(document.createTextNode(i));
    fragment.appendChild(clone)
}

div0.appendChild(fragment)
ready
jquery.appendTo
var span = $('<span/>').
        css({
            background: '#fff',
            margin: 2
        });

for (var i = 0; i < loopCount; i++)
    $('<span/>').
        clone().
        append(i).
        appendTo(div)
ready
jquery.appendTo with temporary wrap's html
var span = $('<span/>').
        css({
            background: '#fff',
            margin: 2
        }),
    temp = $('<div/>');

for (var i = 0; i < loopCount; i++)
    $('<span/>').
        clone().
        append(i).
        appendTo(temp);

div.append(temp.html())
ready
jquery.appendTo with temporary wrap's children
var span = $('<span/>').
        css({
            background: '#fff',
            margin: 2
        }),
    temp = $('<div/>');

for (var i = 0; i < loopCount; i++)
    $('<span/>').
        clone().
        append(i).
        appendTo(temp);

div.append(temp.children())
ready
jquery.append html array
var spanBegin = '<span style="background: #fff; margin: 2px">',
    spanEnd = '</span>',
    htmlArray = [];

for (var i = 0; i < loopCount; i++)
    htmlArray.push(spanBegin+i+spanEnd);

div.append(htmlArray.join(''))
ready

Revisions

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