jQuery .find() vs context, using DOM node as context

JavaScript performance comparison

Revision 7 of this test case created

Info

To modify the actual context of a selector (i.e. cause it to not search the default context - the entire document node - but instead scope to only the specified node) the context attribute must be a DOM Node - not a jQuery selector or even a jQuery collection. If a jQuery selector or collection is used, context acts simply as a wrapper for .find (and will therefore always be slower.)

src: http://brandonaaron.net/blog/2009/06/24/understanding-the-context-in-jquery

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id='myDiv'>
        <p>hello <a href="http://www.example.com/"><span id="mySpan">link</span></a></p>
        <p>world <a href="http://www.example.com/"><span id="mySpan">link</span></a></p>
</div>
<script>
  if (!window.console || !window.console.log) {
   throw 'console.log() is not supported. Please install Firebug. http://getfirebug.com'
  }
</script>
<script>
Benchmark.prototype.setup = function() {
    var $myDiv = $("#myDiv"),
        myDiv = $myDiv[0];
};
</script>

Preparation code output

hello link

world link

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()
$myDiv.find('#mySpan');
pending…
context
$('#mySpan', myDiv);
pending…
straightforward
$('#myDiv #mySpan');
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