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

Revision 15 of this benchmark created by dw on

Description

comparing selector speed

Preparation HTML

<script src="https://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>

Setup

var $article = $('article');
    var article = $article[0];

Test runner

Ready to run.

Testing in
TestOps/sec
find method (node context)
var has = $(article).find('ins').length > 0 ? true : false;
ready
find method (jquery context)
var has = $($article).find('ins').length > 0 ? true : false;
ready
context node
var has = $('ins', article).length > 0 ? true : false;
ready
context jQuery
var has = $('ins', $article).length > 0 ? true : false;
ready
context jQuery[0]
var has = $('ins', $article[0]).length > 0 ? true : false;
ready
cascade
var has = $('article ins').length > 0 ? true : false;
ready
context (no cached)
var has = $('ins', 'article').length > 0 ? true : false;
ready
find method (no cached)
var has = $('article').find('ins').length > 0 ? true : false;
ready

Revisions

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