jQuery :hidden selector (with jQuery 1.5.2 and $.browser fork) (v13)

Revision 13 of this benchmark created by dotherightthing on

Description

Let the jQuery :hidden filter do a attribute check on "type" == "hidden" before resorting to dimension or CSS checks

Preparation HTML

<script src="//code.jquery.com/jquery-1.5.2.min.js"></script>
<style>
#shell a, 
#shell div, 
#shell input {
display:block;
border: 1px solid;
}
#shell .hidden {
display: none;
}
</style>
<div id="shell">
<!-- visible -->
<input name="type" value="visible input" />
<input name="type" value="visible input" />
<input name="type" value="visible input" />
<input name="type" value="visible input" />
<input name="type" value="visible input" />
<input name="type" value="visible input" />
<input name="type" value="visible input" />
<div>visible div</div>
<div>visible div</div>
<div>visible div</div>
<div>visible div</div>
<div>visible div</div>
<div>visible div</div>
<div>visible div</div>
<a href="#">visible hyperlink</a>
<a href="#">visible hyperlink</a>
<a href="#">visible hyperlink</a>
<a href="#">visible hyperlink</a>
<a href="#">visible hyperlink</a>
<a href="#">visible hyperlink</a>
<a href="#">visible hyperlink</a>
<!-- hidden -->
<input name="type" value="hidden input - inline css" style="display:none;" />
<input name="type" value="hidden input - inline css" style="display:none;" />
<input name="type" value="hidden input - inline css" style="display:none;" />
<input name="type" value="hidden input - inline css" style="display:none;" />
<input name="type" value="hidden input - inline css" style="display:none;" />
<input name="type" value="hidden input - inline css" style="display:none;" />
<input name="type" value="hidden input - inline css" style="display:none;" />
<input name="type" value="hidden input" type="hidden" />
<input name="type" value="hidden input" type="hidden" />
<input name="type" value="hidden input" type="hidden" />
<input name="type" value="hidden input" type="hidden" />
<input name="type" value="hidden input" type="hidden" />
<input name="type" value="hidden input" type="hidden" />
<input name="type" value="hidden input" type="hidden" />
<div style="display:none;">hidden div - inline css</div>
<div style="display:none;">hidden div - inline css</div>
<div style="display:none;">hidden div - inline css</div>
<div style="display:none;">hidden div - inline css</div>
<div style="display:none;">hidden div - inline css</div>
<div style="display:none;">hidden div - inline css</div>
<div style="display:none;">hidden div - inline css</div>
<div class="hidden">hidden div - css classname</div>
<div class="hidden">hidden div - css classname</div>
<div class="hidden">hidden div - css classname</div>
<div class="hidden">hidden div - css classname</div>
<div class="hidden">hidden div - css classname</div>
<div class="hidden">hidden div - css classname</div>
<div class="hidden">hidden div - css classname</div>
<a style="display:none;" href="#">hidden hyperlink - inline css</a>
<a style="display:none;" href="#">hidden hyperlink - inline css</a>
<a style="display:none;" href="#">hidden hyperlink - inline css</a>
<a style="display:none;" href="#">hidden hyperlink - inline css</a>
<a style="display:none;" href="#">hidden hyperlink - inline css</a>
<a style="display:none;" href="#">hidden hyperlink - inline css</a>
<a style="display:none;" href="#">hidden hyperlink - inline css</a>
<a class="hidden" href="#">hidden hyperlink - css classname</a>
<a class="hidden" href="#">hidden hyperlink - css classname</a>
<a class="hidden" href="#">hidden hyperlink - css classname</a>
<a class="hidden" href="#">hidden hyperlink - css classname</a>
<a class="hidden" href="#">hidden hyperlink - css classname</a>
<a class="hidden" href="#">hidden hyperlink - css classname</a>
<a class="hidden" href="#">hidden hyperlink - css classname</a>
</div>

Setup

ui.browserscope.colors = ['#ccffcc', '#99ffcc', '#66ff99', '#33ff99', '#00ff99', '#00cc66'];  
    
      // Extend the :hidden filter
      jQuery.expr.filters.hidden2 = function(elem) {
    
        if ($.browser.msie) {
    
          if (elem.getAttribute("type") == 'hidden') return true;
    
        }
    
        return jQuery.expr.filters.hidden(elem);
      }
    
      var $context = $('#shell');
      var $jsperf_test6_result = $('#jsperf_test6_result');
      var $jsperf_test7_result = $('#jsperf_test7_result');

Test runner

Ready to run.

Testing in
TestOps/sec
$("input:hidden") - default jQuery
$("input:hidden");
ready
$("input:hidden2") - updated :hidden filter
$("input:hidden2");
ready
$("input").filter(':hidden')
$("input").filter(':hidden');
ready
$("input").filter(':hidden2')
$("input").filter(':hidden2');
ready
$context.find(':hidden')
$context.find(':hidden');
ready
$context.find(':hidden2')
$context.find(':hidden2');
ready

Revisions

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