documentFragment appendChild vs jquery append

JavaScript performance comparison

Revision 30 of this test case created

Preparation code

<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>
<script>
Benchmark.prototype.setup = function() {
    var div = $('#test-area').
            css({backgroundColor: '#f00'}),
        div0 = div[0],
        loopCount = 1000;
};

Benchmark.prototype.teardown = function() {
    div.empty();
};
</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
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)
pending…
jquery.appendTo
var span = $('<span/>').
        css({
            background: '#fff',
            margin: 2
        });

for (var i = 0; i < loopCount; i++)
    $('<span/>').
        clone().
        append(i).
        appendTo(div)
pending…
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())
pending…
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())
pending…
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(''))
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