Performance Profiling with DevTools

// 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!");