jQuery Multiple Selector Performance Problems

JavaScript performance comparison

Revision 7 of this test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="http://code.jquery.com/jquery-git.js"></script>
<script>
  var jqgit = jQuery.noConflict();
</script>
<div class="test" id="test">
  <script>
    var html = "";

    for ( var j = 0; j < 20; j++ ) {
      html += '<div id="bigdiv' + j + '">a</div>';
    }
    document.write( html );

    var html = "";

    for ( var j = 0; j < 20; j++ ) {
      html += '<div id="bdiv' + j + '">a</div>';
    }
    document.write( html );
  </script>

</div>
    

Preparation code output

<div class="test" id="test"> </div>

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
Two Selectors
for ( var j = 0; j < 100; j++ ) {
  $("#bigdiv"+j).remove();
}
pending…
One Selector
var txt1 ='';
var var1 = '';

for ( var j = 0; j < 100; j++ ) {
   var1 = "'#bdiv" + j +"',";
   txt1 += var1;
}

$(txt1).remove();
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