5 ms·

Essential performance best practices for jQuery

20 points by samgro 15y ago

samgro 15y ago
Oldie but goodie. Point #7, "Leverage Event Delegation", was particularly helpful for me.
- rimantas 15y ago
  Just don't forget that you can use .delegate() now, instead of the solution offered in the article (which is more than two years old).
whichdan 15y ago
So is it generally agreed that $(window).load() should be used over $(document).ready() in most cases?
- dmethvin 15y ago
  I think the point there was that if you have a lot of setup to do, try to defer as much as possible past `.ready()` so that the user will have something to look at. However, if you wait until the `load` event happens, the page is visible and the user can start interacting with it. If you're still messing with the HTML at that point it can be pretty confusing for the user. That's really common with pages that decide for example to AJAX back for saved settings; they can yank the defaults out from under you while you're typing! The southwest.com site does that and it drives me crazy. None of the recommendations should be seen as absolutes, and some conflict with each other. For example, if you're using event delegation you've got to be careful in caching selectors to content that may go away.
alexh 15y ago
I was under the impression that jQuery cached selectors, so the advice "Cache jQuery Objects", while smart for many reasons, would not actually affect performance much at all. Was I wrong?
- dmethvin 15y ago
  It depends on the selector and the browser. Something like $(".myclass") is worth caching on IE7 because it requires a pass through the entire document; there's no `querySelectorAll` or `getElementsByClassName`. I wouldn't start by caching selectors all over the place unless you profile and see that it's slow. Doing a lot of selecting in a `scroll` or `mousemove` handler would be a bad idea though: http://ejohn.org/blog/learning-from-twitter/ http://ejohn.org/blog/learning-from-twitter/
jasonwatkinspdx 15y ago
A lot of this is outdated.
- DanielRibeiro 15y ago
  Yeah, the article is from April 2009. I realized that when he mentioned jQuery 1.3.

20 points by samgro 15y ago

samgro 15y ago

Oldie but goodie. Point #7, "Leverage Event Delegation", was particularly helpful for me.

rimantas 15y ago
Just don't forget that you can use .delegate() now, instead of the solution offered in the article (which is more than two years old).

whichdan 15y ago

So is it generally agreed that $(window).load() should be used over $(document).ready() in most cases?

dmethvin 15y ago
I think the point there was that if you have a lot of setup to do, try to defer as much as possible past `.ready()` so that the user will have something to look at. However, if you wait until the `load` event happens, the page is visible and the user can start interacting with it. If you're still messing with the HTML at that point it can be pretty confusing for the user. That's really common with pages that decide for example to AJAX back for saved settings; they can yank the defaults out from under you while you're typing! The southwest.com site does that and it drives me crazy. None of the recommendations should be seen as absolutes, and some conflict with each other. For example, if you're using event delegation you've got to be careful in caching selectors to content that may go away.

alexh 15y ago

I was under the impression that jQuery cached selectors, so the advice "Cache jQuery Objects", while smart for many reasons, would not actually affect performance much at all. Was I wrong?

dmethvin 15y ago
It depends on the selector and the browser. Something like $(".myclass") is worth caching on IE7 because it requires a pass through the entire document; there's no `querySelectorAll` or `getElementsByClassName`. I wouldn't start by caching selectors all over the place unless you profile and see that it's slow. Doing a lot of selecting in a `scroll` or `mousemove` handler would be a bad idea though: http://ejohn.org/blog/learning-from-twitter/ http://ejohn.org/blog/learning-from-twitter/

jasonwatkinspdx 15y ago

A lot of this is outdated.

DanielRibeiro 15y ago
Yeah, the article is from April 2009. I realized that when he mentioned jQuery 1.3.