jQuery .find() vs. context selector vs non-context selector vs. native Javascript selector (v45)

Revision 45 of this benchmark created by Tom on

Description

Comparing selector speed of different approaches with jquery (latest version) and native Javascript methods.

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<article>
        <p>A test</p>
        <p><ins></ins></p>
        <p>This is text</p>
</article>

Setup

var $article = $('article');

Teardown


    $article = null;

Test runner

Ready to run.

Testing in
TestOps/sec
find method (node context)
var has = $($article[0]).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[0]).length > 0 ? true : false;
ready
context jquery
var has = $('ins', $article).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
select and find
var has = $('article').find('ins').length > 0 ? true : false;
ready
'parent > child' selector
var has = $('article > ins').length > 0 ? true : false;
ready
Native selector
var oArticle = document.getElementsByTagName("article")[0],
    has = oArticle.getElementsByTagName("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.