// Rule #1: Never optimize without measuring first



// Browser DevTools:

// → Performance tab: Record, analyze flame chart

// → Network tab: Waterfall view of requests

// → Memory tab: Heap snapshots, allocation timeline

// → Coverage tab: See unused JS/CSS (huge quick wins!)



// Node.js:

console.time('operation');

doSomething();

console.timeEnd('operation'); // operation: 123.456ms



// More precise:

const start = process.hrtime.bigint();

doSomething();

const end = process.hrtime.bigint();

console.log(`Duration: ${Number(end - start) / 1e6}ms`);



// Professional benchmarking

const { performance, PerformanceObserver } = require('perf_hooks');



const obs = new PerformanceObserver((list) => {

  const entries = list.getEntries();

  entries.forEach((entry) => {

    console.log(`${entry.name}: ${entry.duration.toFixed(2)}ms`);

  });

});

obs.observe({ entryTypes: ['measure'] });



performance.mark('startQuery');

runDatabaseQuery();

performance.mark('endQuery');

performance.measure('query', 'startQuery', 'endQuery');

// Problem: Search input fires on every keystroke

input.addEventListener('input', (e) => {

  search(e.target.value); // Fires 50+ times per second!

});



// Solution A: Debounce — wait until user stops typing

function debounce(fn, delay) {

  let timer;

  return function (...args) {

    clearTimeout(timer);

    timer = setTimeout(() => fn.apply(this, args), delay);

  };

}



const smartSearch = debounce(search, 300); // Wait 300ms after last keystroke

input.addEventListener('input', (e) => smartSearch(e.target.value));



// Solution B: Throttle — run at most once per interval

function throttle(fn, interval) {

  let lastCall = 0;

  return function (...args) {

    const now = Date.now();

    if (now - lastCall >= interval) {

      lastCall = now;

      fn.apply(this, args);

    }

  };

}



const throttledScroll = throttle(logScrollPosition, 100); // Max once per 100ms

window.addEventListener('scroll', throttledScroll);



// When to use which?

// Debounce: search, resize calculations, form validation

// Throttle: scroll handlers, button clicks, mousemove tracking



// Modern: requestAnimationFrame for visual updates

function rafThrottle(fn) {

  let rafId = null;

  return function (...args) {

    if (rafId === null) {

      rafId = requestAnimationFrame(() => {

        fn.apply(this, args);

        rafId = null;

      });

    }

  };

}

<!-- Images: native lazy loading -->

<img src="photo.jpg" loading="lazy" alt="..." width="800" height="600" />

<!-- Always include width/height to prevent layout shift! -->



<!-- Dynamic imports (code splitting) -->

<script type="module">

  // Don't load heavy libraries until needed

  document.getElementById('chart-btn').addEventListener('click', async () => {

    const { Chart } = await import('./chart-lib.js');

    new Chart(ctx, config);

  });



  // Route-based code splitting (React/Vue do this automatically)

  const Dashboard = () => import('./Dashboard.vue');

</script>



<!-- Intersection Observer for "load when visible" -->

<div class="lazy-section" data-src="/api/section-data"></div>



<script>

const observer = new IntersectionObserver(

  (entries) => {

    entries.forEach((entry) => {

      if (entry.isIntersecting) {

        loadSection(entry.target);

        observer.unobserve(entry.target); // Only load once!

      }

    });

  },

  { rootMargin: '200px' } // Start loading 200px before visible

);



document.querySelectorAll('.lazy-section').forEach((el) => observer.observe(el));

</script>

// Virtual scrolling (for long lists — render only visible items)

// Libraries: react-window, tanstack-virtual, @tanstack/react-virtual

// Without it: 10,000 items = 10,000 DOM nodes = slow

// With it: 10,000 items = ~20 DOM nodes (visible viewport) = fast

import { useVirtualizer } from '@tanstack/react-virtual';



const virtualizer = useVirtualizer({

  count: items.length,

  getScrollElement: () => parentRef.current,

  estimateSize: () => 50,

  overscan: 5,

});



// Only renders rows that are currently visible (+/- 5 buffer)

// ❌ Bad: N+1 problem

async function fetchUsersWithPosts() {

  const users = await fetch('/api/users').then(r => r.json());

  for (const user of users) {

    user.posts = await fetch(`/api/users/${user.id}/posts`).then(r => r.json());

    // If 100 users = 101 HTTP requests!

  }

  return users;

}



// ✅ Good: Batch in single request

async function fetchUsersWithPosts() {

  const [users, posts] = await Promise.all([

    fetch('/api/users').then(r => r.json()),

    fetch('/api/posts?includeUsers=true').then(r => r.json()),

  ]);

  // Map posts to users client-side

  return users.map(u => ({ ...u, posts: posts.filter(p => p.userId === u.id) }));

}

// Only 2 HTTP requests regardless of user count!



// ✅ Better: Backend returns nested data in one call

const data = await fetch('/api/users?_embed=posts').then(r => r.json());

// Single request!



// Deduplicate concurrent requests (same URL requested twice simultaneously)

const pendingRequests = new Map();



function deduplicatedFetch(url, options) {

  if (pendingRequests.has(url)) {

    return pendingRequests.get(url); // Return same promise!

  }



  const promise = fetch(url, options)

    .finally(() => pendingRequests.delete(url));



  pendingRequests.set(url, promise);

  return promise;

}



// Cache GET responses (simple TTL cache)

const cache = new Map();



async function cachedFetch(url, ttlMs = 5000) {

  const cached = cache.get(url);

  if (cached && Date.now() - cached.timestamp < ttlMs) {

    return cached.data; // Return from cache!

  }



  const data = await fetch(url).then(r => r.json());

  cache.set(url, { data, timestamp: Date.now() });

  return data;

}



// Stale-while-revalidate (show cached, update in background)

async function swrFetch(url) {

  const cached = cache.get(url);

  if (cached) {

    // Return stale data immediately

    fetch(url).then(r => r.json()).then(data => {

      cache.set(url, { data, timestamp: Date.now() }); // Update cache

    });

    return cached.data;

  }

  // No cache: fetch and wait

  const data = await fetch(url).then(r => r.json());

  cache.set(url, { data, timestamp: Date.now() });

  return data;

}

// React example (same principles apply elsewhere)



// ❌ Bad: New object/array on every render

function Parent() {

  return (

    <Child

      onClick={() => handleClick(id)}     // New function every render!

      style={{ color: 'red' }}            // New object every render!

      data={items.map(i => ({...i}))}     // New array every render!

    />

  );

}



// ✅ Good: Stable references

const handleClickMemoized = useCallback(

  () => handleClick(id),

  [id] // Only recreate when id changes

);



const styleMemoized = useMemo(

  () => ({ color: 'red' }),

  [] // Never changes

);



const dataMemoized = useMemo(

  () => items.map(i => ({...i})),

  [items] // Only recompute when items change

);



return <Child onClick={handleClickMemoized} style={styleMemoized} data={dataMemoized} />;



// General principle (framework-agnostic):

// Props/inputs should be referentially stable between renders.

// If a prop is the same value, use the SAME reference (object/function).

// This enables efficient comparison (=== instead of deep equality).

// ❌ Bad: Multiple DOM writes (reflow triggers!)

list.forEach(item => {

  const el = document.createElement('div');

  el.textContent = item.name;

  el.className = 'item';

  container.appendChild(el); // Reflow each time!

});



// ✅ Good: Document fragment (single reflow)

const fragment = document.createDocumentFragment();

list.forEach(item => {

  const el = document.createElement('div');

  el.textContent = item.name;

  el.className = 'item';

  fragment.appendChild(el); // No reflow!

});

container.appendChild(fragment); // Single reflow!



// ✅ Better: innerHTML (for static content)

container.innerHTML = list

  .map(item => `<div class="item">${escapeHtml(item.name)}</div>`)

  .join('');



// ✅ Best: CSS containment + batch reads/writes

// Read all layout info first, then write all at once

function updateLayout(elements) {

  // Phase 1: READ all (forces reflow once)

  const heights = elements.map(el => el.offsetHeight);



  // Phase 2: WRITE all (triggers one reflow)

  elements.forEach((el, i) => {

    el.style.height = `${heights[i]}px`;

  });

}



// Use CSS containment for isolation

.isolated-component {

  contain: layout style paint;

  /* Browser knows this element's changes won't affect outside */

  /* Optimizes rendering significantly */

}

// Main thread stays responsive while worker does heavy lifting



// worker.js

self.onmessage = function(e) {

  const { data, operation } = e.data;



  switch (operation) {

    case 'sort':

      const sorted = [...data].sort((a, b) => b.value - a.value);

      self.postMessage({ result: sorted });

      break;



    case 'filter':

      const filtered = data.filter(item => item.active);

      self.postMessage({ result: filtered });

      break;



    case 'process':

      // Heavy computation that would freeze UI

      const processed = data.map(heavyTransform);

      self.postMessage({ result: processed });

      break;

  }

};



// main.js

const worker = new Worker('worker.js');



worker.onmessage = function(e) {

  console.log('Worker finished:', e.data.result);

  updateUI(e.data.result);

};



worker.onerror = function(err) {

  console.error('Worker error:', err.message);

};



// Send work to worker

worker.postMessage({

  data: largeDataset,

  operation: 'process'

});

// UI remains responsive while worker processes!



// For ad-hoc tasks (no separate file needed):

const code = `

  self.onmessage = function(e) {

    const result = e.data.reduce((sum, n) => sum + n * n, 0);

    self.postMessage(result);

  };

`;

const blob = new Blob([code], { type: 'application/javascript' });

const adhocWorker = new Worker(URL.createObjectURL(blob));

adhocWorker.onmessage = (e) => console.log('Sum of squares:', e.data);

adhocWorker.postMessage([1, 2, 3, 4, 5]); // 55

<!-- Responsive images -->

<picture>

  <!-- Mobile: small image -->

  <source srcset="hero-small.webp" media="(max-width: 600px)" type="image/webp" />

  <!-- Tablet: medium image -->

  <source srcset="hero-medium.webp" media="(max-width: 1200px)" type="image/webp" />

  <!-- Desktop: large image with high-DPI variant -->

  <source

    srcset="hero-large.webp 1x, hero-large-2x.webp 2x"

    type="image/webp"

  />

  <!-- Fallback -->

  <img src="hero-large.jpg" alt="Hero image" width="1200" height="600" decoding="async" />

</picture>



<!-- Critical images: preload -->

<link rel="preload" as="image" href="hero.webp" type="image/webp" />



<!-- Background images via CSS (not img tags) -->

.hero {

  background-image: url(/images/hero.webp);

  background-size: cover;

  /* Or with media query for different sizes */

}



<!-- Blur-up technique (instant preview + full resolution) -->

<img

  style="background-size: cover; background-image: url(hero-tiny-blur.jpg);"

  src="hero-full.jpg"

  loading="lazy"

  decoding="async"

/>

<!-- Shows blurry tiny image instantly, then full-res loads -->

// Programmatic optimization

// Convert images to modern formats (WebP/AVIF)

// Tools: sharp (Node.js), imagemin CLI, Cloudflare Image Resizing



const sharp = require('sharp');



await sharp('input.png')

  .resize(800, null)           // Width 800, auto height

  .webp({ quality: 80 })       // WebP format (25-35% smaller than JPEG)

  .toFile('output.webp');      // Output file



// Generate multiple sizes for responsive images

const sizes = [

  { name: 'small', width: 400 },

  { name: 'medium', width: 800 },

  { name: 'large', width: 1200 },

];



for (const size of sizes) {

  await sharp('input.jpg')

    .resize(size.width)

    .jpeg({ quality: 75 })

    .toFile(`output-${size.name}.jpg`);

}

# Analyze what's in your bundle

npx webpack-bundle-analyzer dist/stats.json

# Visual tree map of everything in your bundle!



# Find large dependencies

npx cost-of-modules --path ./package.json

# Lists every dependency by size (gzipped)



# Tree shaking check

npx depcheck

# Finds unused dependencies you can remove

// Import only what you need

// ❌ Bad: Import entire library

import _ from 'lodash';              // ~70KB gzipped!

import moment from 'moment';          // ~300KB gzipped!



// ✅ Good: Import specific functions

import debounce from 'lodash/debounce';   // ~1KB

import cloneDeep from 'lodash/cloneDeep';  // ~1KB

import dayjs from 'dayjs';                  // ~7KB (moment alternative)



// ✅ Even better: Native APIs (zero bytes!)

const formatted = Intl.DateTimeFormat('en-US', {

  dateStyle: 'full',

  timeStyle: 'short'

}).format(new Date());



// Replace lodash functions with native equivalents:

_.uniq([...arr])         → [...new Set(arr)]

_.cloneDeep(obj)          → structuredClone(obj)  // Native!

_.get(obj, 'a.b.c')      → obj?.a?.b?.c

_.pick(obj, ['a', 'b'])  → (({a, b}) => ({a, b}))(obj)

_.isEmpty(obj)            → Object.keys(obj).length === 0

_.mapKeys(obj, fn)        → Object.fromEntries(Object.entries(obj).map(...))



// Dynamic imports for rarely-used features

const openModal = () => import('./Modal').then(m => m.default.open());

// Modal code isn't in initial bundle!

□ Run Lighthouse audit (target: 90+ on all categories)

□ Enable gzip/brotli compression on server

□ Add caching headers (Cache-Control)

□ Lazy load below-fold images (loading="lazy")

□ Code split routes/pages (dynamic import)

□ Remove unused dependencies (depcheck)

□ Replace moment.js with dayjs or native Intl

□ Replace lodash with native equivalents or sub-path imports

□ Use WebP/AVIF images with responsive sources

□ Add font-display: swap (prevent FOIT)

□ Minimize critical CSS (inline above-fold styles)

□ Preconnect to third-party origins

□ Defer non-critical JavaScript

□ Virtualize long lists (>100 items)

□ Add skeleton screens (perceived performance!)