jQuery - Improving Performance / Code

Question

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

Answer 1

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 :

1. Always Descend From an #id
2. Use Tags Before Classes
3. Cache jQuery Objects
4. Harness the Power of Chaining
5. Use Sub-queries
6. Limit Direct DOM Manipulation
7. Leverage Event Delegation (a.k.a. Bubbling)
8. Eliminate Query Waste
9. Defer to $(window).load
10. Compress Your JS
11. Learn the Library

jQuery Performance and Optimization Tips topics include :

1. Stay up to date! Are you using methods and techniques that are obsolete?.
2. Context-aware jQuery Code Execution – Are you loading code that isn’t needed?
3. jQuery Unit Testing
4. Benchmark Your jQuery Code
5. Keep download times to a minimum with one compressed master JS file.
6. Context Vs. Find
7. Window.load all the way.
8. Strike A Balance Between Your Use Of JavaScript & jQuery

jQuery Performance Tuning Tips - Paul Irish topics include :

1. Optimize selectors for Sizzle’s ‘right to left’ model
2. Use live() not click()
3. Pull elements off of the DOM while you play with them
4. Use find() rather than context
5. Use HTML 5
6. Append style tags when styling 15 or more elements
7. Test selectors using Google Page Speed
8. Use object detection even if jQuery doesn't throw an error
9. Use direct functions rather than their convenience counterparts
10. Learn the lesser known methods

Improving jQuery Performance with Large Data Sets topics include :

1. Use JavaScript native for() loop instead of jQuery's $.each() helper
   function.
2. Do NOT append an element to the DOM in your loop.
3. If you have a lot of elements to be inserted into the DOM, surround them
   with a parent element for better performance.
4. Don't use string concatenation, instead use array's join() method for a very long strings.
5. 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.