What does the Web API do in the browser?

JavaScriptJunior~3 min read

What is the Web API

Web API (Web Application Programming Interface) - a set of built-in capabilities provided by the browser so that JavaScript can interact with its environment: windows, the document, the network, the user, devices, and so on.

These APIs are not part of the JavaScript language itself, but part of the browser (or a runtime environment, such as Node.js).

Example of the simplest Web API

javascript

console.log(window.innerWidth);
alert('Hello!');
document.body.style.background = 'lightblue';

Here:

window is a browser object (a Web API for controlling the window);
alert() is a Web API method for showing a dialog;
document is a Web API for working with the DOM (the page).

None of these objects are part of the JS standard (ECMAScript), but they are provided by the browser so JavaScript can work with the web page.

JavaScript and the Web API: who is responsible for what

Component	Where it comes from	What it's responsible for
JavaScript (ECMAScript)	The language	Logic, computation, data structures
Web API (browser)	The environment (Chrome, Firefox, etc.)	Networking, the DOM, events, timers
Event Loop	A mechanism of the environment	Manages code execution and event queues

How it actually works

When you call, for example:

javascript

setTimeout(() => console.log('Later'), 1000);

setTimeout is a Web API provided by the browser.
The browser counts down the time separately from the main JS thread.
When the timer expires, the Web API puts the task in the macrotask queue.
The Event Loop picks it up and hands it back to JavaScript.
JS runs the callback.

In other words, JS delegates the work to the browser through the Web API.

Main groups of Web APIs

1. DOM API: working with the HTML document

Lets you read and modify the structure of the page.

javascript

document.querySelector('h1').textContent = 'Hello, world!';

document, Element, Node, classList, style, dataset, and so on.

2. Network API: working with the network

Lets you make HTTP requests and work with responses.

javascript

fetch('https://api.github.com/users/octocat')
  .then(res => res.json())
  .then(console.log);

fetch, XMLHttpRequest, WebSocket, EventSource.

3. Timers API: deferred actions

javascript

setTimeout(() => console.log('After a second'), 1000);
setInterval(() => console.log('Every second'), 1000);

setTimeout, setInterval, clearTimeout, clearInterval.

4. Storage API: storing data in the browser

javascript

localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme'));

localStorage, sessionStorage, IndexedDB, CacheStorage.

5. Multimedia & Graphics API

Working with the camera, microphone, audio, and video:

javascript

navigator.mediaDevices.getUserMedia({ video: true });

Working with graphics:

javascript

const ctx = canvas.getContext('2d');
ctx.fillRect(10, 10, 100, 100);

Canvas API, WebGL, MediaStream, Web Audio API.

6. Device & Hardware API

Geolocation API: determining location;
Battery API, Clipboard API, Vibration API;
Sensor APIs: access to the accelerometer, gyroscope, and so on.

javascript

navigator.geolocation.getCurrentPosition(pos => console.log(pos.coords));

7. Security & Identity API

Credential Management
WebAuthn
Permissions API
Notification API

javascript

Notification.requestPermission().then(console.log);

8. Events API: the event system

Lets you listen for user actions and system reactions.

javascript

button.addEventListener('click', () => console.log('Click!'));

Mouse, keyboard, network, visibility, loading events, and so on.

How the Web API interacts with the Event Loop

JavaScript calls an API (for example, fetch, setTimeout).
The call goes into the browser's Web API.
When the task is ready (the response arrives, the timer fires), the Web API puts a callback into the task queue.
The Event Loop runs the callback once the call stack is free.

In other words, the Web API is like the browser's "workers", and JS is the "manager" that hands them assignments.

A simple analogy

JavaScript is the head chef, and the Web API is the kitchen with equipment and assistants.

JS hands out tasks (put the kettle on, bake a pie), and the Web API does the work and reports back when it's done. JS does not wait, it keeps cooking other dishes.

Summary

Component	What it does
Web API	A set of functions and objects provided by the browser
Not part of JavaScript	Implemented in the browser engine (Chrome: Blink, Firefox: Gecko)
Interaction	Through `window`, `document`, `navigator`, `fetch`, `setTimeout`, and others
Run asynchronously	Put callbacks into the Event Loop queue
Main purpose	Give JS access to the browser's and device's capabilities

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.