jQuery .find() vs. context selector vs non-context selector

JavaScript performance comparison

Revision 15 of this test case created by dw

Info

comparing selector speed

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<p>
  <ins>
  </ins>
</p>
<article>
  <p>
    A test
  </p>
  <p>
    <ins>
    </ins>
  </p>
  <p>
    This is text
  </p>
</article>
<p>
  <ins>
  </ins>
</p>
<article>
  <p>
    A test
  </p>
  <p>
    <ins>
    </ins>
  </p>
  <p>
    This is text
  </p>
</article>
<p>
  <ins>
  </ins>
</p>
<article>
  <p>
    A test
  </p>
  <p>
    <ins>
    </ins>
  </p>
  <p>
    This is text
  </p>
  <article>
    <p>
      A test
    </p>
    <p>
      <ins>
      </ins>
    </p>
    <p>
      This is text
    </p>
    <article>
      <p>
        A test
      </p>
      <p>
        <ins>
        </ins>
      </p>
      <p>
        This is text
      </p>
      <article>
        <p>
          A test
        </p>
        <p>
          <ins>
          </ins>
        </p>
        <p>
          This is text
        </p>
        <article>
          <p>
            A test
          </p>
          <p>
            <ins>
            </ins>
          </p>
          <p>
            This is text
          </p>
          <article>
            <p>
              A test
            </p>
            <p>
              <ins>
              </ins>
            </p>
            <p>
              This is text
            </p>
            <article>
              <p>
                A test
              </p>
              <p>
                <ins>
                </ins>
              </p>
              <p>
                This is text
              </p>
            </article>
          </article>
        </article>
      </article>
    </article>
  </article>
</article>
<article>
  <p>
    A test
  </p>
  <div>
    <div>
      <div>
        <p>
          <ins>
          </ins>
        </p>
      </div>
    </div>
  </div>
  <p>
    This is text
  </p>
</article>
<script>
  Benchmark.prototype.setup = function() {
    var $article = $('article');
    var article = $article[0];
  };
</script>

Preparation code output

A test

This is text

A test

This is text

A test

This is text

A test

This is text

A test

This is text

A test

This is text

A test

This is text

A test

This is text

A test

This is text

A test

This is text

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
find method (node context)
 
var has = $(article).find('ins').length > 0 ? true : false;
 pending…
find method (jquery context)
 
var has = $($article).find('ins').length > 0 ? true : false;
 pending…
context node
 
var has = $('ins', article).length > 0 ? true : false;
 pending…
context jQuery
 
var has = $('ins', $article).length > 0 ? true : false;
 pending…
context jQuery[0]
 
var has = $('ins', $article[0]).length > 0 ? true : false;
 pending…
cascade
 
var has = $('article ins').length > 0 ? true : false;
 pending…
context (no cached)
 
var has = $('ins', 'article').length > 0 ? true : false;
 pending…
find method (no cached)
 
var has = $('article').find('ins').length > 0 ? true : false;
 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