⚡ Frontend Optimization Techniques

Optimization isn't about doing everything — it's about knowing which lever fixes which bottleneck. Each technique here is written as:

1.1 Debouncing

function debounce(fn, delay = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}
// search: fire the API call only after typing pauses for 300ms
input.addEventListener('input', debounce(e => search(e.target.value), 300));

Use for: search-as-you-type, autosave, validating a field, window resize recalculations.

1.2 Throttling

function throttle(fn, limit = 100) {
  let waiting = false;
  return (...args) => {
    if (waiting) return;
    fn(...args);
    waiting = true;
    setTimeout(() => (waiting = false), limit);
  };
}
window.addEventListener('scroll', throttle(updateScrollProgress, 100));

Debounce vs throttle: debounce = "wait until they're done" (search); throttle = "steady updates while it happens" (scroll position, infinite-scroll triggers).

2.1 Virtualization (windowing)

import { FixedSizeList } from 'react-window';

<FixedSizeList height={600} width="100%" itemCount={10000} itemSize={40}>
  {({ index, style }) => <div style={style}>Row {index}</div>}
</FixedSizeList>
// only ~20 rows exist in the DOM at any time, regardless of itemCount

Tools: react-window, react-virtuoso, TanStack Virtual. Use for: long feeds, tables, chat logs, dropdowns with thousands of options.

2.2 Pagination & infinite scroll

const io = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) loadNextPage();
});
io.observe(document.querySelector('#load-more-sentinel'));

3.1 Memoization (memo / useMemo / useCallback)

const Child = React.memo(function Child({ onPick, rows }) { /* ... */ });

function Parent({ data }) {
  const rows = useMemo(() => expensiveTransform(data), [data]); // cache value
  const onPick = useCallback(id => select(id), []);              // stable ref
  return <Child rows={rows} onPick={onPick} />;                  // Child can skip re-render
}

3.2 Stable keys & references

4.1 Code splitting & lazy loading

const Dashboard = React.lazy(() => import('./Dashboard'));

<Suspense fallback={<Spinner />}>
  <Dashboard />   {/* its JS downloads only when this route renders */}
</Suspense>

4.2 Tree shaking

import { debounce } from 'lodash-es';   // ✅ only debounce is bundled
import _ from 'lodash';                  // ❌ pulls the whole library

4.3 Resource hints (preload / prefetch / preconnect)

<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>
<link rel="prefetch" href="/dashboard.js">
<link rel="preconnect" href="https://api.example.com">

5.1 Image optimization

<img src="hero-800.webp" width="800" height="450" loading="lazy"
     srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
     sizes="(max-width: 600px) 100vw, 800px" alt="...">

5.2 Minification & compression

5.3 Caching (HTTP, CDN, service worker)

app.4f3a9b.js   →  Cache-Control: public, max-age=31536000, immutable
index.html      →  Cache-Control: no-cache  (always revalidate the entry point)

See also the dedicated Caching Guide.

6.1 Web Workers

// main thread
const worker = new Worker('crunch.js');
worker.postMessage(bigDataset);
worker.onmessage = e => render(e.data);  // UI never froze
// crunch.js
onmessage = e => postMessage(heavyCompute(e.data));

6.2 requestAnimationFrame & batching

function onScroll() {
  requestAnimationFrame(() => {        // coalesce work to one per frame
    header.style.transform = `translateY(${offset}px)`;
  });
}

6.3 Avoid layout thrashing

const widths = items.map(el => el.offsetWidth);          // read phase
items.forEach((el, i) => el.style.width = widths[i]*2 + 'px'); // write phase → 1 reflow

Full mechanics in React Internals → Render Cost & Reflow.

7.1 Skeleton screens

7.2 Optimistic UI

const [optimisticLikes, addOptimistic] = useOptimistic(likes);
function like() {
  addOptimistic(likes + 1);  // instant UI
  saveLike();                // reconciles / reverts on failure
}

7.3 Suspense, transitions & deferred values