jQuery .closest( '.class' ) vs custom closestByClassName( 'class' )

JavaScript performance comparison

Test case created by ThinkingStiff

Preparation code

<section>
<div><div><div><div><div id="end" class="end"><div><div><div><div><div><div><div><div>
<article>
<p>
<span id="start" class="start"></span>
</p>
</article>
</div></div></div></div></div></div></div></div></div></div></div></div></div>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<script>
Benchmark.prototype.setup = function() {
    var startJQ = $( '#start' ),
        startDOM = $( '#start' )[0];
   
    Element.prototype.closestByClassName = function ( className ) {
   
        return this.className && this.className.split( ' ' ).indexOf( className ) > -1
            ? this
            : ( this.parentNode.closestByClassName && this.parentNode.closestByClassName( className ) );
   
    };
   
   
};
</script>

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
closest( '.class' )
var element = startJQ.closest( '.start' ),
    element = startJQ.closest( '.end' ),
    element = startJQ.closest( '.not-found' );
 
pending…
custom closestByClassName
var element = startDOM.closestByClassName( 'start' ),
    element = startDOM.closestByClassName( 'end' ),
    element = startDOM.closestByClassName( 'not-found' );
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. Here’s a list of current revisions for this page:

0 comments

Add a comment