Network Optimization & Caching
Network requests are usually the biggest performance bottleneck. Learn to minimize requests, cache responses, use service workers for offline support, and optimize how data is transferred.
Network Optimization
- Minimize requests - Bundle assets, combine API calls, use sprites/icon fonts
- Cache responses - Store API data in memory or localStorage to avoid re-fetching
- AbortController - Cancel in-flight requests: controller.abort() (on unmount or re-search)
- Preloading - Prefetch data on hover, preload critical resources
- Compression - Enable gzip/brotli on server. Minify JS/CSS in production
- HTTP/2 - Multiplexing: multiple requests over single connection. No need for bundling tricks
Network Optimization Code
// Request caching
class ApiCache {
constructor(ttl = 60000) { // 60 second TTL
this.cache = new Map();
this.ttl = ttl;
}
async fetch(url) {
const cached = this.cache.get(url);
if (cached && Date.now() - cached.timestamp < this.ttl) {
console.log("Cache HIT:", url);
return cached.data;
}
console.log("Cache MISS:", url);
const response = await fetch(url);
const data = await response.json();
this.cache.set(url, { data, timestamp: Date.now() });
return data;
}
invalidate(url) { this.cache.delete(url); }
clear() { this.cache.clear(); }
}
const api = new ApiCache(30000); // 30s cache
// AbortController - cancel requests
let currentController = null;
async function searchApi(query) {
// Cancel previous request
if (currentController) currentController.abort();
currentController = new AbortController();
try {
const response = await fetch(
`https://api.example.com/search?q=${query}`,
{ signal: currentController.signal }
);
return await response.json();
} catch (error) {
if (error.name === "AbortError") {
console.log("Request cancelled (new search started)");
} else {
throw error;
}
}
}
// Prefetch on hover
function prefetchOnHover(link) {
// link.addEventListener("mouseenter", () => {
// const prefetchLink = document.createElement("link");
// prefetchLink.rel = "prefetch";
// prefetchLink.href = link.href;
// document.head.appendChild(prefetchLink);
// });
}
console.log("Network optimization patterns demonstrated");Tip
Tip
AbortController is essential in React useEffect cleanup. Without it, navigating away from a page triggers state updates on unmounted components, causing 'Can't perform a React state update on an unmounted component' warnings.
Cache strategies power offline-first.
Common Mistake
Warning
Not debouncing search requests. Each keystroke fires a fetch request. Without debounce, typing 'hello' sends 5 requests but only the last one matters. Always debounce search inputs and cancel previous requests.
Practice Task
Note
Optimized search: (1) Build a search with 300ms debounce and AbortController. (2) Add caching so repeated queries don't fetch again. (3) Show loading state and handle race conditions.
Quick Quiz
Key Takeaways
- Network requests are usually the biggest performance bottleneck.
- Minimize requests - Bundle assets, combine API calls, use sprites/icon fonts
- Cache responses - Store API data in memory or localStorage to avoid re-fetching
- AbortController - Cancel in-flight requests: controller.abort() (on unmount or re-search)