How do you improve the performance of jQuery-heavy pages?

Summary

Cache selections, scope queries, use event delegation instead of thousands of handlers, batch DOM changes (build off-DOM, insert once), avoid layout thrashing (separate reads such as .height() from writes), debounce or throttle scroll and resize handlers, prefer CSS transitions, and load only the plugins you use.

Longer Answer

For large manipulations, .detach() an element, modify it, and reattach it to avoid repeated reflows. Measure with the browser's Performance panel: long tasks from jQuery code usually come from repeated querying in loops, inserting elements one by one, or synchronous AJAX. Upgrading old jQuery versions also brings performance improvements.

Key Points

• Cache and scope selectors.
• Delegate events.
• Batch DOM writes; avoid thrashing.
• Debounce scroll/resize.