What are JavaScript performance best practices?

Answer

JavaScript is the primary source of interactivity issues and slow page loads. Key practices: Code splitting: split bundle by route/feature — users only download code for the current page. Use dynamic imports: const { default: Chart } = await import("./Chart"). Tree shaking: remove unused code — use ES modules and bundlers that support tree shaking (webpack, Rollup, Vite). Defer/async loading: non-critical scripts with defer or async. Avoid long tasks: any JS task >50ms blocks the main thread. Break up with setTimeout(fn, 0) or scheduler.yield(). Web Workers: CPU-intensive work (parsing, computation) off the main thread. Avoid unnecessary re-renders: in React, use memoization (React.memo, useMemo, useCallback). Debounce/throttle: limit frequency of expensive operations in event handlers. Third-party scripts: load analytics, ads, chat widgets after page load with async; use Partytown to run them in Web Workers. Bundle analysis: use webpack-bundle-analyzer or source-map-explorer to identify large dependencies.