Colorbox selector performance

JavaScript performance comparison

Test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div class="node-content content clearfix">
  <div class="field field-name-example field-type-image field-label-hidden">
    <div class="field-items">
      <div class="field-item even">
        <a href="/images/example1.png" title="Example 1" class="colorbox" rel="gallery-example">
        <img typeof="foaf:Image" src="/images/example1_thumb.png" alt="Example 1">
        </a>
      </div>
    </div>
  </div>
</div>
<div class="node-content content clearfix">
  <div class="field field-name-example field-type-image field-label-hidden">
    <div class="field-items">
      <div class="field-item even">
        <a href="/images/example2.png" title="Example 2" class="colorbox" rel="gallery-example">
        <img typeof="foaf:Image" src="/images/example2_thumb.png" alt="Example 2">
        </a>
      </div>
    </div>
  </div>
</div>
<div class="node-content content clearfix">
  <div class="field field-name-example field-type-image field-label-hidden">
    <div class="field-items">
      <div class="field-item even">
        <a href="/images/example3.png" title="Example 3" class="colorbox" rel="gallery-example">
        <img typeof="foaf:Image" src="/images/example3_thumb.png" alt="Example 3">
        </a>
      </div>
    </div>
  </div>
</div>
<div class="node-content content clearfix">
  <div class="field field-name-example field-type-image field-label-hidden">
    <div class="field-items">
      <div class="field-item even">
        <a href="/images/example4.png" title="Example 4" class="colorbox" rel="gallery-example">
        <img typeof="foaf:Image" src="/images/example4_thumb.png" alt="Example 4">
        </a>
      </div>
    </div>
  </div>
</div>
<div class="node-content content clearfix">
  <div class="field field-name-example field-type-image field-label-hidden">
    <div class="field-items">
      <div class="field-item even">
        <a href="/images/example5.png" title="Example 5" class="colorbox" rel="gallery-example">
        <img typeof="foaf:Image" src="/images/example5_thumb.png" alt="Example 5">
        </a>
      </div>
    </div>
  </div>
</div>
<div class="node-content content clearfix">
  <div class="field field-name-example field-type-image field-label-hidden">
    <div class="field-items">
      <div class="field-item even">
        <a href="/images/example1.png" title="Example 1" class="somethingelse" rel="gallery-example">
        <img typeof="foaf:Image" src="/images/example1_thumb.png" alt="Example 1">
        </a>
      </div>
    </div>
  </div>
</div>
<div class="node-content content clearfix">
  <div class="field field-name-example field-type-image field-label-hidden">
    <div class="field-items">
      <div class="field-item even">
        <a href="/images/example2.png" title="Example 2" class="somethingelse" rel="gallery-example">
        <img typeof="foaf:Image" src="/images/example2_thumb.png" alt="Example 2">
        </a>
      </div>
    </div>
  </div>
</div>
<div class="node-content content clearfix">
  <div class="field field-name-example field-type-image field-label-hidden">
    <div class="field-items">
      <div class="field-item even">
        <a href="/images/example3.png" title="Example 3" class="somethingelse" rel="gallery-example">
        <img typeof="foaf:Image" src="/images/example3_thumb.png" alt="Example 3">
        </a>
      </div>
    </div>
  </div>
</div>
<div class="node-content content clearfix">
  <div class="field field-name-example field-type-image field-label-hidden">
    <div class="field-items">
      <div class="field-item even">
        <a href="/images/example4.png" title="Example 4" class="somethingelse" rel="gallery-example">
        <img typeof="foaf:Image" src="/images/example4_thumb.png" alt="Example 4">
        </a>
      </div>
    </div>
  </div>
</div>
<div class="node-content content clearfix">
  <div class="field field-name-example field-type-image field-label-hidden">
    <div class="field-items">
      <div class="field-item even">
        <a href="/images/example5.png" title="Example 5" class="somethingelse" rel="gallery-example">
        <img typeof="foaf:Image" src="/images/example5_thumb.png" alt="Example 5">
        </a>
      </div>
    </div>
  </div>
</div>

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
With filter
$('a, area, input').filter('.colorbox');
pending…
Multiple selectors
$('a.colorbox, area.colorbox, input.colorbox');
pending…
Only class
$('.colorbox');
pending…
Only a.class
$('a.colorbox');
pending…

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

Compare results of other browsers

0 comments

Add a comment