jquery context all inner vs recursive children (v8)

Revision 8 of this benchmark created by Shawn Sweeney on

Description

This will test the performance between using a hand written recursive function that uses .children vs jquery's native context selector.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script type="text/javascript">
  function addCSSClassRecursively(topElement, CssClass) {
    $(topElement).addClass(CssClass);
    $(topElement).children().each(

    function() {
      addCSSClassRecursively($(this), CssClass);
    });
  }
</script>
<div id="parent">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
            </div>
          </div>
        </div>
      </div>
      <div>
      </div>
    </div>
    <div>
    </div>
  </div>
  <div>
  </div>
</div>
​

Test runner

Ready to run.

Testing in
TestOps/sec
jquery context selector
jQuery(function($) {
   $("*", "#parent").addClass("test").parent().addClass("test");
});
ready
recursion method
jQuery(function($) {
  addCSSClassRecursively($('#parent'), "test");
});
ready
Decendant
jQuery(function($) {
$("#parent").addClass("test");
   $("#parent *").addClass("test");
});
ready
modified context selector
jQuery(function($) {
   $("*", "#parent").addClass("test");
   $("#parent").addClass("test");
});
ready
Decendant little mod
jQuery(function($) {
  $("#parent *").addClass("test");
  $("#parent").addClass("test");
});
ready

Revisions

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

  • Revision 6: published by PABLO RODRIGUEZ LOPEZ on
  • Revision 8: published by Shawn Sweeney on