js dom insertion performance

JavaScript performance comparison

Revision 4 of this test case created

Info

Test inserting many different javascript values at once by class, id, and data attribute.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
Benchmark.prototype.setup = function() {
    var data = {};
   
    for (var i=0; i < 700; i++) {
        $('body').append(
            '<section><div><table><tbody><tr><td><span class="test-' +
                i + '" id="test-' + i + '" data-js="test-' + i +
                '">--</span></td></tr></tbody></table></div></section>'
        );
   
        data[i] = Math.random() * 999999;
    }
};
</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
By ID
for (var i=0; i < 700; i++) {
    $('#test-' + i);
}
pending…
By Class
for (var i=0; i < 700; i++) {
    $('.test-' + i);
}
pending…
By data-attribute
for (var i=0; i < 700; i++) {
    $('[data-js=test-' + i + ']');
}
 
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