pavanarya – Pavan Kumar Aryasomayajulu <br> My New Blog http://xyzcoder.com

Contact Email : pavan.aryasomayajulu@gmail.com

Jquery optimization tip

with 7 comments

Recently i wrote some code that makes use of Jquery Custom selector to great extent. It is working fine with page that has less amount of data but when the page size is growing i am getting an error in ie stating(Unresponsive script error).

These are the few things that i did to overcome these kind of messages

Lesson learnt
Lesson Learnt : In my opinion using the jquery selector something like this
$(‘[customAttribute=someValue]’) should be avoided i the dom is huge.
Reason: This selector searches entire dom content to find the element that has attribute “customAttribute” with value “someValue”. This will be a performance hit if the page content is huge.

Tip :
If you want to make use of Jquery selectors it would be nice if we can cache it using some java script values.
For example :

$('[customttribute=someValue]')
$('[customttribute=someValue]').parent();

So here we are adding some css and also trying to get parent element to our $(‘[customttribute=someValue]’)

So what happens here is in the above lines it will loop on entire pages dom elements twice to find the element and then it applies the css and to find parent element.

So to optimize this we can do something like this.

var domElement=$('[customttribute=someValue]');
domElement.css('border','3px dotted green');
domElement.parent();

So we are doing the same task here but the only difference is we are caching the selector result into js variable . So it loops only once on entire page’s dom to get the required element and then apply css and find parent.

This has really a great impact on my code

Thanks,
Pavan Kumar Aryasomayajulu ,
pavanarya.wordpress.com

Written by pavanarya

April 11, 2013 at 7:48 am

Posted in Java script, Jquery

Tagged with

7 Responses

Subscribe to comments with RSS.

  1. Not sure about the context but adding some other selectors like tagName/className/parents classname to your selection criteria would also help in avoiding searching all the elements.

    goutami90

    April 11, 2013 at 8:56 am

  2. Good post! And a great tip! I’ve run into this before too, especially with IE (<= 8). Caching is a great solution. Also, I've had success with goutami90's suggestion too. Additionally, when possible if the element has an ID using that as the selector (i.e. $(#id)) is faster than other more generic selectors.

    Another note on the specific IE error. It's caused by the number of lines of JavaScript executed reaching a max number that IE sets. A way to prevent this (it's a hack) is to send a pause to the browser. This effectively resets the count and tricks IE. Here is a good post on how to accomplish this using closure: http://www.picnet.com.au/blogs/Guido/post/2010/03/04/How-to-prevent-Stop-running-this-script-message-in-browsers

    Shawn Sweeney

    April 11, 2013 at 9:47 pm

  3. on its own is significantly faster by a high order of magnitude? Take a look at this jsPerf test to see results on a per-browser level: http://jsperf.com/getelementbyid-vs-jquery-id . Now of course, we have to keep in mind that jQuery (and Sizzle – its selector engine) are doing a lot more behind the scenes to optimize our query (and that a jQuery object, not just a DOM node is returned).

    Reginald A. Myers

    April 30, 2013 at 2:47 pm

  4. You’re correct. If the entire ID is known, that is always the best way to select a single element.

    Wilma Robles

    May 2, 2013 at 8:29 am

  5. to add to this. never use a selector inside iteration function like each. If you think the selector is common across all the iterations cache it like pavan mentioned above and use that cached selector in the iteration function.

    suneelvanapalli

    January 26, 2014 at 5:03 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: