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

JavaScript performance comparison

Revision 45 of this test case created by Tom

Info

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

Preparation code

<script src="//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>
<script>
Benchmark.prototype.setup = function() {
    var $article = $('article');
};

Benchmark.prototype.teardown = function() {
    $article = null;
};
</script>

Preparation code output

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