Profiling
Use Chrome DevTools Performance panel to identify slow jQuery selectors, layout thrashing, and animation jank.
jQuery
Advanced
4 min read
Profiling jQuery Code
Example
// Measure jQuery operation speed
console.time("selector");
const $items = $(".complex-selector > .child:not(.hidden)");
console.timeEnd("selector");
// Chrome DevTools:
// 1. Performance tab → Record → interact → Stop
// 2. Look for: Long Tasks (>50ms), Forced Layout/Reflow (yellow)
// 3. Layers tab: check what is GPU-composited
// Mark code boundaries for profiling:
performance.mark("query-start");
$(".items").filter(":visible").each(fn);
performance.mark("query-end");
performance.measure("query", "query-start", "query-end"); Pro Tip
performance.measure() annotations appear in the Performance panel timeline for precise profiling.