CODEWITHSUNDEEP
javascriptjqueryhtmldom
Holly
Holly

Reputation: 7752

jQuery Caching & traversing Objects

I'm trying to get my head around jQuery caching and how it improves performance and how it should be used?

As I understand it, when you use a jQuery selector you are searching the DOM and creating a jQuery object which you can traverse. Does that mean if you create a jQuery object of the html body tag you can avoid the need to traverse the DOM when creating new jQuery objects? Would there be any point to doing that?

Considering ...

var htmlBody = $('body');
$('header',htmlBody).css('background','green');
$('footer',htmlBody).css('background','yellow');

Would the above piece of code be cheaper/use less resources than...

$('header').css('background','green');
$('footer').css('background','yellow');

Upvotes: 0

Views: 366

Answers (3)

Srini
Srini

Reputation: 348

There will some performance improvement, if DOM traversing will be done with in specified context. But in the example context is given as "body". This will be useful, when DOM traversing will be done for static cached DOM in larger scale. 

$( "div.container" ).click(function() {
  $( "span", this ).addClass( "test" );
});

In this, span will be searched with in $("div.container").

If same DOM manipulation is being done for multiple times within the same function or closure object, it would be better to store the DOM element in javascript object and use to avoid repeated DOM traversing.

Upvotes: 0

devconcept
devconcept

Reputation: 3685

The first thing you have to understand is that DOM access is expensive. It is considered to be one of the most common causes of poor performance.

Consider the following code:

var elem = document.getElementByTagName('p'),
    i;

for (i = 0; i < document.getElementByTagName('p').lenght; i++) {   
    elem[i].innerHtml = 'foo';
}

And the alternative using the cached lenght

var elem = document.getElementByTagName('p'),
    i;

for (i = 0; i < elem.lenght; i++) {   
    elem[i].innerHtml = 'foo';
}

The second case will run faster in all browsers (two times faster in Safari 3 and 190 times in IE7. And this is only by using a cached value of the lenght in a loop.

Jquery provides a better API to access and manipulate the DOM but under the hoods still relies on the native API to do the job. Your considerations for performance must be based not on how many variables you have but instead how fast your code will run. Some of this points will help you

  • Avoiding DOM access in loops
  • Assigning DOM references to local variables and working with the locals
  • Caching the length when iterating over HTML collections

In other words if you use JQuery to select an element and need to access some of the elements previously selected you will get a boost of performance if use the variable instead of transversing the DOM again.

Upvotes: 1

chazsolo
chazsolo

Reputation: 8484

In your case, I would say there is no difference to storing the body as context. The syntax is:

jQuery( selector [, context ] )

Where context is a DOM element or selector to use as a context for searching (e.g. only child nodes of the context will be searched). In essence, jQuery('footer') is using body as context.

What would improve performance is if you cache elements nested deeper within the DOM, and use them as the context. On a larger scale this would certainly be in one's best interest if there is a lot of DOM manipulation or traversing.

Upvotes: 0

Related Questions