Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

If you select an element in jQuery by ID is there still a speed improvement by giving it a context?

Imagine this simplified markup:

<div id="header">
   <!-- Other things.... -->
   <div id="detail">

   </div>
</div>

and assume you already have this code:

var $hdr = $("#header");

Is there any speed difference for jQuery to lookup "detail" this way:

var $detail = $("#detail", $hdr);

vs

var $detail = $("#detail");

Since detail is being looked up by ID?

like image 977
user169867 Avatar asked Mar 15 '10 12:03

user169867


2 Answers

No, you don't have to do that. Since id is unique in a document no need to add any other optimization.

I would go with

var $detail = $("#detail");
like image 108
rahul Avatar answered Nov 11 '22 20:11

rahul


No. Passing a context will actually make it slower. The relevant source code from jQuery is given below with an explanation.

This code basically says:

  1. If (the selector is an HTML string or an id, AND (either it's specifically HTML or no context is given)) 1.a Then do some stuff like calling document.getElementById()
  2. Otherwise evaluate the context, and then run the selector

And here's the stripped out source..

init: function( selector, context ) {
    ...
    if ( typeof selector === "string" ) {
        ...
        // This gets ignored because we passed a context
        // document.getElementById() isn't called directly
        if ( match && (match[1] || !context) ) {
            ...
            } else {
                elem = document.getElementById( match[2] );
                ...
            }
        ...
        // Either this gets executed if a jQuery wrapped context was passed
        } else if ( !context || context.jquery ) {
            return (context || rootjQuery).find( selector );
        }
        // Or this gets executed, if a simple selector was passed as context
        } else {
            return jQuery( context ).find( selector );
        }
    ...
}

match is the resulting array of a regular expression to find out if the selector is either an HTML string, or an id expression. If it's an HTML string, then match[1] will be populated. If it's an id (#someId), then match[2] will be populated.

like image 30
Anurag Avatar answered Nov 11 '22 21:11

Anurag