What are JavaScript performance best practices?

Why Interviewers Ask This

Interviewers use this question to quickly assess whether a candidate has the foundational knowledge required for Web Performance development. It reveals whether you understand the building blocks that more complex concepts rely on.

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.

Common Mistake

Rushing to answer is a common mistake. Take two seconds to structure your response: definition → example → trade-off. This structure makes complex Web Performance answers easy to follow.