js dom insertion performance (v4)

Revision 4 of this benchmark created on

Description

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

Preparation HTML

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

Setup

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;
    }

Test runner

Ready to run.

Testing in
TestOps/sec
By ID
for (var i=0; i < 700; i++) {
    $('#test-' + i);
}
ready
By Class
for (var i=0; i < 700; i++) {
    $('.test-' + i);
}
ready
By data-attribute
for (var i=0; i < 700; i++) {
    $('[data-js=test-' + i + ']');
}
 
ready

Revisions

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