Performance Profiling with DevTools
Chrome DevTools Performance tab records and visualizes JavaScript execution, rendering, and painting. Learn to identify bottlenecks, find slow functions, and measure improvement.
Performance Profiling
- Performance tab — Record a session. See CPU usage, rendering, scripting, painting
- Flame chart — Visual call stack over time. Wide bars = slow functions
- Bottom-Up — See which functions took the most total time
- Call Tree — See execution order from top to bottom
- Lighthouse — Automated performance audit with scores and recommendations
- Performance API — Measure in code: performance.now(), performance.mark(), performance.measure()
Performance Profiling Code
// Performance API — measure execution time
const start = performance.now();
// Simulate work
const arr = Array.from({ length: 100000 }, () => Math.random());
arr.sort((a, b) => a - b);
const end = performance.now();
console.log(`Sort took: ${(end - start).toFixed(2)}ms`);
// Performance marks & measures (more structured)
performance.mark("fetchStart");
// Simulated async work
setTimeout(() => {
performance.mark("fetchEnd");
performance.measure("Fetch Duration", "fetchStart", "fetchEnd");
const measure = performance.getEntriesByName("Fetch Duration")[0];
console.log(`Fetch: ${measure.duration.toFixed(2)}ms`);
}, 500);
// Benchmarking function
function benchmark(name, fn, iterations = 1000) {
const start = performance.now();
for (let i = 0; i < iterations; i++) {
fn();
}
const duration = performance.now() - start;
console.log(`${name}: ${duration.toFixed(2)}ms (${iterations} iterations)`);
return duration;
}
// Compare two approaches
benchmark("for loop", () => {
let sum = 0;
for (let i = 0; i < 1000; i++) sum += i;
});
benchmark("reduce", () => {
Array.from({ length: 1000 }, (_, i) => i).reduce((s, n) => s + n, 0);
});
// DevTools workflow:
// 1. Open DevTools → Performance tab
// 2. Click Record → Interact with app → Stop
// 3. Analyze flame chart — wide bars are bottlenecks
// 4. Check Bottom-Up for total time per function
// 5. Fix the slowest functions first
console.log("Pro tip: Use Lighthouse for automated performance auditing!");Tip
Tip
Focus on the longest bars in flame charts — they represent the biggest time consumers. Functions that take >50ms block rendering and should be optimized or moved to a worker.
Use performance.mark/measure for custom timing. PerformanceObserver for Core Web Vitals. sendBeacon for analytics.
Common Mistake
Warning
Profiling in development mode with DevTools open. DevTools itself slows your app. Profile in production builds with DevTools closed for accurate results. Use performance.mark() for precise custom measurements.
Practice Task
Note
Profiling: (1) Use DevTools Performance tab to record a page interaction. (2) Identify the longest task in the flame chart. (3) Use performance.mark and measure to benchmark a specific function.
Quick Quiz
Key Takeaways
- Chrome DevTools Performance tab records and visualizes JavaScript execution, rendering, and painting.
- Performance tab — Record a session. See CPU usage, rendering, scripting, painting
- Flame chart — Visual call stack over time. Wide bars = slow functions
- Bottom-Up — See which functions took the most total time