Browser APIs

What Is the Difference Between Event Bubbling and Capturing?

Bubbling and capturing are the two opposite directions an event travels through the DOM tree: capturing fires the event from the root down to the target elemen…

What Is Event Delegation and Why Use It?

Event delegation is the pattern of attaching a single event listener to a common ancestor element instead of separate listeners on every individual child, rely…

What Are Web Components?

Web Components are a set of native browser APIs — Custom Elements, Shadow DOM, and HTML Templates — that together let you define a reusable, encapsulated HTML…

What Are Service Worker Caching Strategies?

A service worker caching strategy is the policy a service worker’s `fetch` event handler applies to decide whether a request is served from the Cache API, the…

What Is a Progressive Web App (PWA)?

A Progressive Web App is a website built with a web app manifest and a service worker so it can be installed to a device’s home screen, launch in its own windo…

What Are the Size Limits of Web Storage Mechanisms?

Cookies are limited to roughly 4KB per cookie (and a per-domain count cap around 50-180 depending on the browser), localStorage and sessionStorage typically ca…

What Is the Intersection Observer API and Why Use It?

The Intersection Observer API lets you asynchronously detect when a target element enters or exits the viewport (or another ancestor element), without the expe…

What Is the Mutation Observer API and When Should You Use It?

The Mutation Observer API lets you asynchronously watch a DOM subtree for changes — child insertions/removals, attribute changes, or text content changes — and…

What Is the Resize Observer API and Why Is It Useful?

The Resize Observer API lets you asynchronously detect when an element’s content box (or border box) size actually changes, which is essential for responsive,…

When Should You Use requestIdleCallback?

`requestIdleCallback` schedules low-priority work to run during a browser’s spare idle time within a frame, after higher-priority tasks like rendering and user…

What Are Web Workers and When Should You Use Them?

A Web Worker is a JavaScript thread that runs in the background, separate from the main UI thread, letting you run CPU-intensive work like parsing large data o…

Shared Workers vs Web Workers: What Is the Difference?

A dedicated Web Worker is a background thread owned by a single browser tab or script, while a SharedWorker is a single background thread that multiple tabs, i…

What Is the Background Sync API?

The Background Sync API lets a web app register a deferred task with a Service Worker so that a failed or offline action, like submitting a form, automatically…

How Do Web Push Notifications Work?

Web push notifications work by having the browser generate a unique subscription endpoint tied to a push service, which the app’s server later calls with an en…

What Is the Cache API and How Does It Differ From HTTP Caching?

The Cache API is a programmable, script-controlled storage mechanism for Request/Response pairs that a Service Worker uses to explicitly decide what to store a…

How Does the Geolocation API Work in the Browser?

The Geolocation API is a browser-provided interface that asks the user for permission and then returns the device coordinates, either once via getCurrentPositi…

What Is the Web Animations API and How Does It Compare to CSS Animations?

The Web Animations API (WAAPI) is a JavaScript interface, exposed via element.animate(), that lets you define and control keyframe animations programmatically…

What Is WebGL and How Does It Render Graphics in the Browser?

WebGL is a JavaScript API, based on OpenGL ES, that gives web pages direct access to the GPU through a canvas element so scenes can be rendered by running smal…

What Is the Web Audio API and How Does the Audio Graph Work?

The Web Audio API is a browser interface for processing and synthesizing audio through a modular graph of AudioNode objects — sources, effects, and destination…

How Does Browser Storage Quota Management Work?

Browsers grant each origin a share of disk space for localStorage, IndexedDB, and Cache Storage that is bounded by a quota the browser computes from total free…

What Is the Permissions-Policy Header Used For?

The Permissions-Policy header lets a site explicitly enable or disable powerful browser features — such as the camera, microphone, geolocation, or autoplay — f…