Essential Web APIs Every Frontend Developer Should Know
Practical reference for Fetch, Storage, Clipboard, Intersection Observer, Web Workers, and more.
- Practical reference for Fetch, Storage, Clipboard, Intersection Observer, Web Workers, and more.
- Fetch API.
- Storage and Persistence.
- DOM and UI APIs.
- Performance APIs.
Fetch API
The Fetch API is the modern standard for HTTP requests. Basic: const data = await (await fetch(url)).json();. Unlike XMLHttpRequest, Fetch uses Promises and has a cleaner API. Key patterns: always check response.ok (Fetch only rejects on network errors, not 404/500), use AbortController for timeouts, set Content-Type headers for POST. Use the API Request Builder to construct and test requests before coding.
Storage and Persistence
Web Storage (localStorage, sessionStorage) provides simple key-value storage. localStorage persists until cleared; sessionStorage clears when tab closes. Both limited to ~5MB and synchronous. For larger/structured data, use IndexedDB — async, transactional, supports indices, hundreds of MB. Cache API (with Service Workers) stores request/response pairs for offline access. The newer Origin Private File System (OPFS) provides file-system-like storage with high-performance access.
DOM and UI APIs
Intersection Observer watches for elements entering/leaving viewport — lazy loading, infinite scroll, scroll animations, visibility tracking. MutationObserver watches DOM changes — reacting to third-party script insertions. ResizeObserver fires on element size changes — responsive components, container queries. Clipboard API provides async clipboard access. Web Animations API (element.animate()) gives programmatic control over CSS animations with better performance than JS-driven libraries.
Performance APIs
Web Workers run JavaScript in a separate thread for heavy computation (parsing large files, image processing, data transforms). requestIdleCallback schedules low-priority work during browser idle periods — analytics, pre-fetching. Performance API (performance.now(), mark(), measure()) provides high-resolution timing. Beacon API (navigator.sendBeacon()) sends data asynchronously, guaranteed to complete even during page unload — ideal for analytics.