6 ms·

JQuery Performance Tips And Tricks

40 points by ahmicro 16y ago

ecaroth 16y ago
kinda basic for people with a good amount of jquery experience, with many commonly known jquery usage patterns.. but some good stuff for newer devs
PCheese 16y ago
Original article: http://addyosmani.com/blog/jquery-performance-tips-2011/ http://addyosmani.com/blog/jquery-performance-tips-2011/
hellweaver666 16y ago
Does anyone else hate when development information is presented as a video? I find it incredibly annoying because I can't scan through it quickly and pull what I want out. Video producers, please ensure you provide a written version too!
- trustfundbaby 16y ago
  I didn't even watch it ... came here to see if someone had done a cliff notes written version.
- rbranson 16y ago
  I'd understand this if they were charging for it, but it's free shit. It was nice enough that they took the time to put the video together and post it online. Come on.
- kellishaver 16y ago
  I agree, but as far as video presentations go, this one wasn't bad. There was some fairly basic, but good info there. Mr. Osmani seems pretty comfortable presenting, talking jQuery, and has a clear voice that's easy to listen to. I do wish videos like this would come with some summary text that highlighted the main points and showed the example code used in the video, like the way Ryan does over at Railscasts. I mean, you know it was all written up beforehand anyway, during the process of making the video, so it's not like it adds a lot of extra work.
- hacktheplanet 16y ago
  To be completely honest it's not at all a matter of being against publishing written versions of the content too, but rather a lack of time to get everything tidied up for an accompanying text version this week. I figured it would be better to at least give the community something they could use until I was able to post up a written version too.. Plz don't hate on us content creators :) - Addy.
- misterbwong 16y ago
  It was a pretty useful video for some basics on jQuery performance Here are my notes for those that don't want to watch. Apologies for typos/inaccuracies/weird formatting: Why performance? 1. you want apps to be snappy(duh) 2. more work = more memory = slower apps Tip 1 Stay up to date of jQuery core. Each update usually brings performance updates ex: 1.5 bringing a complete rewrite of the ajax module Tip 2 Know your selectors. All selectors not created equal Fastest to slowest: ID selectors -> Element selectors -> Class Selectors -> Pseudo selectors Why? ID and element selectors are backed by native DOM operations. Pseudo has no browser based call. So if you're using :hidden, you are running the "find :hidden function" on every element in your select space. Parents & children - Sizzle matches selectors right to left. Slower example: $("#parent > .child").show(); This code will find all .child elements before looking to see if it's a child of #parent Faster example: $parent.children(".child").show(); This code would be faster but keep in mind it only finds direct children of $parent Tip 3 Caching = Win Example: var parents = $('.parents'); //cache parents Bad: var children = $('.parents').find('.child'); //this one does a find over the entire dom again Good: parents.find('.child'); //this one just searches through the parents obj Tip 3.5 Bonus Avoid global variables (they're slow, cause conflicts, etc) Tip 4 Use Chaining Why? Less code, easier to write, runs fast Almost all jQuery methods return a jQuery object, which allow chaining Do this: var parents = $('.parents').doSomething().doSomethingElse(); Don't do: var parents = $(.parents').doSomething(); var parents = $('.parents').doSomethingElse(); Another example: //Without chaining (finds #notification 3 times) $('#notification').fadeIn('slow'); $('#notification').addClass('.activeNotification'); $('#notification').css('margin-left', '50px'); //with chaining (finds #notification once) $('#notification').fadeIn('slow') .addClass('.activeNotification') .css('margin-left', '50px'); Tip 4.5 Bonus Use indentation to make it more readable Tip 5 Event Delegation Know the difference between 3 Types of event handling: .bind(), .live(), .delegate() .bind() simplest form of attaching function to some event (click, etc) works best with small sets of data. can take time to bind() to lots of elements does not handle dynamic data (e.g. newly created elements, etc) .bind() to table rows might not be that great browser needs to keep track of them instead, use event delgation (.live() or .delegate())on the table and let the event bubble up .live() simplest way to do event delegation best used for simple scenarios functions best with supplied selector not chainable works with dynamic data .delegate() subtle diff between live and delegate more focused way of doing event delegates (?) Tip 6 The DOM isn't a database Every DOM insertion (e.g. appending an image to the document) is costly Minimize by building Htmlstrings and using a single append() as late as possible Use detach() if doing heavy iteration with a node then re-insert when done Tip 6.5 Attaching data Common way: //convenience method that incurs overhead $('#item').data(key, value) Faster way: //significantly faster bc it's a low level method $.data('#item', key, value); Tip 7: Avoid Loops. Nested DOM selectors can perform better If it's possible avoid loops and use selector engine instead. Slow way: $('#menu a.submenu').each( function(index){ $(this).doSomething().doSomethingElse(); }); Better way (if possible): $('#menu a.submenu').doSomething().doSomethingElse(); There are places when loops can't be avoided. That's OK. Selector is faster if you can use it, however. Tip 8: Keep your code DRY (Don't Repeat Yourself) Tip 9: When in doubt, perf test jsPerf.com - Easy way to compare perf on js snippets uses benchmark.js - a neat benchmarking utility that works cross-platform easy to share code or modify other tests also useful as a js knowledge base
mattbaker 16y ago
We're flattered, Addy. http://eng.wealthfront.com/2010/10/jquery-right-way.html http://eng.wealthfront.com/2010/10/jquery-right-way.html
ernestipark 16y ago
I just started using jQuery on something I've been developing and I've been dying because I can get things to work, but I don't know if what I'm doing is best practice. This definitely helps a ton!
Luyt 16y ago
I wonder whether I'm allergic to 'Eehhh...' and 'Ahm...' interjections? When a speaker uses them multiple times in every sentence, I only hear the Uhms and Ehms and Ahms after a while.

40 points by ahmicro 16y ago

kinda basic for people with a good amount of jquery experience, with many commonly known jquery usage patterns.. but some good stuff for newer devs

PCheese 16y ago

Original article: http://addyosmani.com/blog/jquery-performance-tips-2011/ http://addyosmani.com/blog/jquery-performance-tips-2011/

hellweaver666 16y ago

Does anyone else hate when development information is presented as a video? I find it incredibly annoying because I can't scan through it quickly and pull what I want out. Video producers, please ensure you provide a written version too!

trustfundbaby 16y ago
I didn't even watch it ... came here to see if someone had done a cliff notes written version.
rbranson 16y ago
I'd understand this if they were charging for it, but it's free shit. It was nice enough that they took the time to put the video together and post it online. Come on.
kellishaver 16y ago
I agree, but as far as video presentations go, this one wasn't bad. There was some fairly basic, but good info there. Mr. Osmani seems pretty comfortable presenting, talking jQuery, and has a clear voice that's easy to listen to. I do wish videos like this would come with some summary text that highlighted the main points and showed the example code used in the video, like the way Ryan does over at Railscasts. I mean, you know it was all written up beforehand anyway, during the process of making the video, so it's not like it adds a lot of extra work.
hacktheplanet 16y ago
To be completely honest it's not at all a matter of being against publishing written versions of the content too, but rather a lack of time to get everything tidied up for an accompanying text version this week. I figured it would be better to at least give the community something they could use until I was able to post up a written version too.. Plz don't hate on us content creators :) - Addy.
misterbwong 16y ago
It was a pretty useful video for some basics on jQuery performance Here are my notes for those that don't want to watch. Apologies for typos/inaccuracies/weird formatting: Why performance? 1. you want apps to be snappy(duh) 2. more work = more memory = slower apps Tip 1 Stay up to date of jQuery core. Each update usually brings performance updates ex: 1.5 bringing a complete rewrite of the ajax module Tip 2 Know your selectors. All selectors not created equal Fastest to slowest: ID selectors -> Element selectors -> Class Selectors -> Pseudo selectors Why? ID and element selectors are backed by native DOM operations. Pseudo has no browser based call. So if you're using :hidden, you are running the "find :hidden function" on every element in your select space. Parents & children - Sizzle matches selectors right to left. Slower example: $("#parent > .child").show(); This code will find all .child elements before looking to see if it's a child of #parent Faster example: $parent.children(".child").show(); This code would be faster but keep in mind it only finds direct children of $parent Tip 3 Caching = Win Example: var parents = $('.parents'); //cache parents Bad: var children = $('.parents').find('.child'); //this one does a find over the entire dom again Good: parents.find('.child'); //this one just searches through the parents obj Tip 3.5 Bonus Avoid global variables (they're slow, cause conflicts, etc) Tip 4 Use Chaining Why? Less code, easier to write, runs fast Almost all jQuery methods return a jQuery object, which allow chaining Do this: var parents = $('.parents').doSomething().doSomethingElse(); Don't do: var parents = $(.parents').doSomething(); var parents = $('.parents').doSomethingElse(); Another example: //Without chaining (finds #notification 3 times) $('#notification').fadeIn('slow'); $('#notification').addClass('.activeNotification'); $('#notification').css('margin-left', '50px'); //with chaining (finds #notification once) $('#notification').fadeIn('slow') .addClass('.activeNotification') .css('margin-left', '50px'); Tip 4.5 Bonus Use indentation to make it more readable Tip 5 Event Delegation Know the difference between 3 Types of event handling: .bind(), .live(), .delegate() .bind() simplest form of attaching function to some event (click, etc) works best with small sets of data. can take time to bind() to lots of elements does not handle dynamic data (e.g. newly created elements, etc) .bind() to table rows might not be that great browser needs to keep track of them instead, use event delgation (.live() or .delegate())on the table and let the event bubble up .live() simplest way to do event delegation best used for simple scenarios functions best with supplied selector not chainable works with dynamic data .delegate() subtle diff between live and delegate more focused way of doing event delegates (?) Tip 6 The DOM isn't a database Every DOM insertion (e.g. appending an image to the document) is costly Minimize by building Htmlstrings and using a single append() as late as possible Use detach() if doing heavy iteration with a node then re-insert when done Tip 6.5 Attaching data Common way: //convenience method that incurs overhead $('#item').data(key, value) Faster way: //significantly faster bc it's a low level method $.data('#item', key, value); Tip 7: Avoid Loops. Nested DOM selectors can perform better If it's possible avoid loops and use selector engine instead. Slow way: $('#menu a.submenu').each( function(index){ $(this).doSomething().doSomethingElse(); }); Better way (if possible): $('#menu a.submenu').doSomething().doSomethingElse(); There are places when loops can't be avoided. That's OK. Selector is faster if you can use it, however. Tip 8: Keep your code DRY (Don't Repeat Yourself) Tip 9: When in doubt, perf test jsPerf.com - Easy way to compare perf on js snippets uses benchmark.js - a neat benchmarking utility that works cross-platform easy to share code or modify other tests also useful as a js knowledge base

mattbaker 16y ago

We're flattered, Addy. http://eng.wealthfront.com/2010/10/jquery-right-way.html http://eng.wealthfront.com/2010/10/jquery-right-way.html

ernestipark 16y ago

I just started using jQuery on something I've been developing and I've been dying because I can get things to work, but I don't know if what I'm doing is best practice. This definitely helps a ton!

Luyt 16y ago

I wonder whether I'm allergic to 'Eehhh...' and 'Ahm...' interjections? When a speaker uses them multiple times in every sentence, I only hear the Uhms and Ehms and Ahms after a while.