Mini-Build: Performance Monitor Dashboard
Build a performance monitoring tool that tracks function execution times, memory estimates, and renders a summary. Applies all optimization concepts from this module - measurement, profiling, and reporting.
Performance Monitor Features
- Track function execution time
- Record multiple measurements
- Calculate min, max, average
- Memory usage estimation
- Performance report generation
Performance Monitor Code
// Performance Monitor Dashboard
class PerformanceMonitor {
constructor() {
this.metrics = new Map();
}
measure(name, fn) {
const start = performance.now();
const result = fn();
const duration = performance.now() - start;
if (!this.metrics.has(name)) {
this.metrics.set(name, []);
}
this.metrics.get(name).push(duration);
return result;
}
async measureAsync(name, fn) {
const start = performance.now();
const result = await fn();
const duration = performance.now() - start;
if (!this.metrics.has(name)) this.metrics.set(name, []);
this.metrics.get(name).push(duration);
return result;
}
getStats(name) {
const measurements = this.metrics.get(name);
if (!measurements || measurements.length === 0) return null;
const sorted = [...measurements].sort((a, b) => a - b);
return {
name,
count: measurements.length,
min: sorted[0].toFixed(2),
max: sorted[sorted.length - 1].toFixed(2),
avg: (measurements.reduce((s, n) => s + n, 0) / measurements.length).toFixed(2),
median: sorted[Math.floor(sorted.length / 2)].toFixed(2),
};
}
report() {
console.log("\n📊 Performance Report");
console.log("═".repeat(60));
for (const name of this.metrics.keys()) {
const stats = this.getStats(name);
console.log(`
🏷️ ${stats.name} (${stats.count} runs)`);
console.log(` Min: ${stats.min}ms | Max: ${stats.max}ms`);
console.log(` Avg: ${stats.avg}ms | Median: ${stats.median}ms`);
}
}
}
// Demo
const monitor = new PerformanceMonitor();
// Measure different operations
for (let i = 0; i < 10; i++) {
monitor.measure("Array.sort (10K)", () => {
Array.from({ length: 10000 }, () => Math.random()).sort((a, b) => a - b);
});
monitor.measure("Array.filter (10K)", () => {
Array.from({ length: 10000 }, () => Math.random()).filter(n => n > 0.5);
});
monitor.measure("Set creation (10K)", () => {
new Set(Array.from({ length: 10000 }, (_, i) => `item_${i}`));
});
}
monitor.report();Tip
Tip
Create a performance budget: max 200KB JavaScript, max 3s load time, max 100ms input latency. Automated performance monitoring (Lighthouse CI) prevents regressions in every deploy.
Measure first! Code split, tree shake.
Common Mistake
Warning
Optimizing based on a single run. Network conditions, CPU load, and browser state all vary. Run benchmarks multiple times (at least 5) and use the median result for reliable comparisons.
Practice Task
Note
Performance audit: (1) Run Lighthouse on your project and document the scores. (2) Fix the top 3 recommendations. (3) Re-run and measure improvement. Target 90+ on all categories.
Quick Quiz
Key Takeaways
- Build a performance monitoring tool that tracks function execution times, memory estimates, and renders a summary.
- Track function execution time
- Record multiple measurements
- Calculate min, max, average