How would you diagnose a slow JavaScript web page in production?
Quick Interview Answer
Detailed Explanation
Start by measuring rather than guessing. Use browser performance tools, network traces, runtime profiling, real-user monitoring, and application telemetry to identify whether the bottleneck is network transfer, JavaScript execution, rendering, API latency, memory growth, or another dependency.
Inspect bundle size, long main-thread tasks, unnecessary DOM work, repeated layouts, expensive event handlers, duplicate requests, large JSON payloads, and excessive third-party scripts. Use code splitting, caching, efficient data access, debouncing or throttling where appropriate, and Web Workers for suitable CPU-heavy work.
After making a change, measure again against a representative workload. A senior-level answer should distinguish perceived performance, network performance, rendering performance, and computational performance instead of applying generic optimizations blindly.
Code Example
// Example: basic measurement around application work.
performance.mark("load-products-start");
const response = await fetch("/api/products");
const products = await response.json();
performance.mark("load-products-end");
performance.measure(
"load-products",
"load-products-start",
"load-products-end"
);
console.log(
performance.getEntriesByName("load-products")
);