I just started working with jQuery and I have been searching for some type of resource on how to improve the speed/performance of my code. I was wondering if anyone had any tips or resources that could possibly help me out.
Thanks,
Bev
1 Answer
I had a few sites bookmarked on this very topic, hopefully they will help you out with what you need. (Topics range from simple to advanced)
jQuery Performance Rules topics include :
- Always Descend From an #id
- Use Tags Before Classes
- Cache jQuery Objects
- Harness the Power of Chaining
- Use Sub-queries
- Limit Direct DOM Manipulation
- Leverage Event Delegation (a.k.a. Bubbling)
- Eliminate Query Waste
- Defer to $(window).load
- Compress Your JS
- Learn the Library
jQuery Performance and Optimization Tips topics include :
- Stay up to date! Are you using methods and techniques that are obsolete?.
- Context-aware jQuery Code Execution – Are you loading code that isn’t needed?
- jQuery Unit Testing
- Benchmark Your jQuery Code
- Keep download times to a minimum with one compressed master JS file.
- Context Vs. Find
- Window.load all the way.
- Strike A Balance Between Your Use Of JavaScript & jQuery
jQuery Performance Tuning Tips - Paul Irish topics include :
- Optimize selectors for Sizzle’s ‘right to left’ model
- Use live() not click()
- Pull elements off of the DOM while you play with them
- Use find() rather than context
- Use HTML 5
- Append style tags when styling 15 or more elements
- Test selectors using Google Page Speed
- Use object detection even if jQuery doesn't throw an error
- Use direct functions rather than their convenience counterparts
- Learn the lesser known methods
Improving jQuery Performance with Large Data Sets topics include :
- Use JavaScript native for() loop instead of jQuery's $.each() helper
function.- Do NOT append an element to the DOM in your loop.
- If you have a lot of elements to be inserted into the DOM, surround them
with a parent element for better performance.- Don't use string concatenation, instead use array's join() method for a very long strings.
- Use setTimeout() function for your long list looping and concatenation
functions.
Hopefully these will be enough to get you started on your journey to jQuery performance heaven.
4 Comments
Kyle Wild
+1 great post. Also, in the name of Teaching A Man To Fish, this link may be helpful: google.com/search?q=ways+jquery+performance
Pointy
I think the advice to use
.live() instead of .click() (etc) is good, but even better advice is to use .delegate() instead.
gblazex
The second source seems to be very dissonant for me. 2. Are you loading code that isn’t needed? vs "5. Keep download times to a minimum with one compressed master JS file.". Also "7. Window.load all the way." - your users might argue with that...
Pointy
In fact the fans of fancy JavaScript loader toolkits like LabJS would argue that it's a little faster to load two scripts rather than just one combined script. Personally I'm not so sure it's worth the hassle, but web client performance is certainly a fast-moving target.