js dom insertion performance

JavaScript performance comparison

Revision 4 of this test case created by

Preparation code

<script src="https://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 CCBot 2.0.0 / Other 0.0.0
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.

0 Comments