4

I've just come to the end of a large development project. We were on a tight timeline, so a lot of optimization was "deferred". Now that we met our deadline, we're going back and trying to optimize things.

My questions is this: What are some of the most important things you look for when optimizing jQuery web sites. Alternately I'd love to hear of sites/lists that have particularly good advise for optimizing jQuery.

I've already read a few articles, http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx was an especially good read.

aepheus
  • 7,827
  • 7
  • 36
  • 51
  • 2
    +1 for the "25 excellent tips" website – ram Mar 15 '10 at 20:20
  • exact duplicate: http://stackoverflow.com/questions/1587375/what-are-some-quick-tips-for-increasing-jquery-performance – Gordon Gustafson Mar 15 '10 at 21:02
  • I've found the single best optimization to be following the id > element name > class name selector precedence. If at all possible, use an id if you can, otherwise use and element, otherwise use a class. #my_id is better than div.my_class is better than .myclass – aepheus Mar 15 '10 at 21:11
  • 1
    @CrazyJugglerDrummer silly question but how do you find things like that so quick. I did a search on jquery optimization and didn't come up with anything that good for a couple pages. – aepheus Mar 15 '10 at 21:13
  • 1
    @aepheus for this one I searched jquery optimizations and sorted by votes, figuring that it would be a popular enough topic not to be buried down too far (ended up as 7th question). looking at synonyms (eg. performance) can sometimes help as well. :D – Gordon Gustafson Mar 16 '10 at 13:43
  • Vote up to CrazyJugglerDrummer for good advice – aepheus Mar 16 '10 at 15:38

2 Answers2

2

@aepheus, here is another site for reference: www.artzstudio.com/2009

Check out #8 on Eliminate Query waste. hth

nolabel
  • 1,147
  • 3
  • 18
  • 26
1

mostly i look at selectors that repeat themselfs.. most of the times these can be saved into a variable and used over and over, for example:

$('.some_class').doSomthing();
$('.some_class').doSomethingElse();

can be turned into:

selectedItems = $('.some_class');
selectedItems.doSomething(); selectedItems.doSomethingElse();

this way the selector goes over the DOM once... then you can continue to use the variable as a jquery object thanks to the fact that every jquery method returns the jquery object.

Just one tip out of many out there...

Ken
  • 691
  • 5
  • 14
  • 1
    Or into `$('.some_class').doSomething().doSomethingElse()`. Might seem awkward at first but it's a really useful feature. – Felix Mar 15 '10 at 20:48
  • 1
    yes of course you're right - but it doesn't always work for every situation... mostly it does, but some end cases you might need separate operations – Ken Mar 15 '10 at 20:58
  • While something like this would significantly help reduce overhead (making one selector call instead of two) I would guess that changing to $('td.some_class') in many contexts would give more of a bonus than chaining would. – aepheus Mar 16 '10 at 15:41
  • of course.. my 2 cents was regarding saving on selecting twice - and not on optimizing the selector itself; which is a subject all of its own (covered in depth in the links other provided). – Ken Mar 16 '10 at 19:26