Basics of Browser APIs

Browser APIs are interfaces provided by the browser that JavaScript can use to interact with the page, browser, network, device, and rendering system.

A useful mental model:

JavaScript
    │
    ▼
Browser APIs
    │
    ├── DOM
    ├── Events
    ├── Fetch / Network
    ├── Storage
    ├── URL / History
    ├── Rendering / Animation
    ├── Observers
    ├── Media / Files
    └── Device APIs

1. JavaScript vs Browser APIs

JavaScript itself provides things such as:

Array;
Map;
Set;
Promise;
Date;
JSON;

The browser provides additional APIs:

document;
window;
fetch();
localStorage;
navigator;
WebSocket;
requestAnimationFrame();

So:

JavaScript = language/runtime
Browser APIs = capabilities provided by the browser

2. DOM API

The DOM (Document Object Model) represents the HTML document as objects.

const button = document.querySelector("button");

button.textContent = "Click me";

button.addEventListener("click", () => {
  console.log("clicked");
});

Common DOM APIs:

document.querySelector();
document.querySelectorAll();
document.createElement();
element.append();
element.remove();
element.classList;
element.style;
element.textContent;
element.getAttribute();
element.setAttribute();

3. Events

Events allow JavaScript to react to things happening in the browser.

Common events

Mouse

click
dblclick
mousedown
mouseup
mousemove
mouseenter
mouseleave
mouseover
mouseout
contextmenu

Pointer

Pointer events work across mouse, touch, and pen.

pointerdown
pointerup
pointermove
pointerenter
pointerleave
pointerover
pointerout
pointercancel

Keyboard

keydown
keyup

Example:

document.addEventListener("keydown", (event) => {
  console.log(event.key);
});

keypress is deprecated.

Forms

input
change
submit
reset
focus
blur
focusin
focusout
invalid

Example:

input.addEventListener("input", () => {
  console.log(input.value);
});

Page lifecycle

DOMContentLoaded
load
beforeunload
pagehide
pageshow
visibilitychange

Example:

document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM is ready");
});

Important distinction:

DOMContentLoaded
    → HTML has been parsed and DOM is ready

load
    → page resources have finished loading

Neither means that every internal rendering step has completed.

4. Fetch API

The Fetch API makes HTTP requests.

const response = await fetch("/api/users");
const users = await response.json();

console.log(users);

POST:

await fetch("/api/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name: "Marvin",
  }),
});

Useful methods:

fetch();
response.json();
response.text();
response.blob();
response.arrayBuffer();

5. Web Storage

localStorage

Stores small amounts of string data that persist across browser sessions.

localStorage.setItem("theme", "dark");

const theme = localStorage.getItem("theme");

localStorage.removeItem("theme");

Clear everything:

localStorage.clear();

sessionStorage

Similar to localStorage, but associated with the current page session.

sessionStorage.setItem("step", "2");

For larger or structured client-side data, consider IndexedDB instead.

6. URL API

The URL API makes it easier to parse and manipulate URLs.

const url = new URL("https://example.com/products?page=2");

console.log(url.hostname);
console.log(url.pathname);
console.log(url.searchParams.get("page"));

Manipulating query parameters:

url.searchParams.set("page", "3");

console.log(url.href);

7. History API

The History API lets JavaScript manipulate browser navigation history.

history.pushState({}, "", "/about");

Replace the current history entry:

history.replaceState({}, "", "/about");

Listen for back/forward navigation:

window.addEventListener("popstate", () => {
  console.log("navigation occurred");
});

This is important for client-side routers and SPAs.

8. Rendering and Animation APIs

These APIs interact closely with the browser’s rendering pipeline.

A simplified rendering pipeline is:

DOM + CSS
    ↓
Style calculation
    ↓
Layout
    ↓
Paint
    ↓
Composite
    ↓
Screen

requestAnimationFrame()

Schedules a callback before the browser renders the next frame.

function animate() {
  element.style.transform = "translateX(100px)";
}

requestAnimationFrame(animate);

For continuous animation:

let x = 0;

function animate() {
  x += 1;

  element.style.transform = `translateX(${x}px)`;

  if (x < 500) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

Use it for visual updates instead of trying to synchronize animation with setInterval().

cancelAnimationFrame()

Cancel a scheduled frame:

const id = requestAnimationFrame(animate);

cancelAnimationFrame(id);

9. Web Animations API

Element.animate() allows JavaScript to create and control animations.

const animation = element.animate(
  [{ transform: "translateX(0)" }, { transform: "translateX(100px)" }],
  {
    duration: 1000,
    fill: "forwards",
  },
);

Control the animation:

animation.play();
animation.pause();
animation.reverse();
animation.cancel();

This is different from manually changing styles every frame with requestAnimationFrame().

getComputedStyle()

Read the browser’s computed CSS values.

const styles = getComputedStyle(element);

console.log(styles.width);
console.log(styles.color);
console.log(styles.display);

classList

Manipulate CSS classes:

element.classList.add("active");
element.classList.remove("active");
element.classList.toggle("active");

matchMedia()

Test CSS media-query conditions from JavaScript.

const mobile = window.matchMedia("(max-width: 768px)");

console.log(mobile.matches);

Listen for changes:

mobile.addEventListener("change", (event) => {
  console.log(event.matches);
});

11. IntersectionObserver

Detect when an element enters or leaves a viewport or another scroll container.

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      console.log("Element is visible");
    }
  }
});

observer.observe(element);

Common uses:

Lazy loading
Infinite scrolling
Reveal animations
Visibility tracking

Instead of constantly doing:

window.addEventListener("scroll", ...)

you can often use IntersectionObserver.

12. ResizeObserver

Detect changes to an element’s size.

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    console.log(entry.contentRect.width);
    console.log(entry.contentRect.height);
  }
});

observer.observe(element);

Useful for components that need to react to their own dimensions.

13. requestIdleCallback()

Schedules low-priority work when the browser has idle time.

requestIdleCallback(() => {
  console.log("low-priority work");
});

Do not use it for animation.

Think:

requestAnimationFrame()
    → "I need to update something visually"

requestIdleCallback()
    → "I have non-urgent work"

14. Canvas API

Canvas provides a drawing surface.

HTML:

<canvas id="canvas"></canvas>

JavaScript:

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

ctx.fillRect(10, 10, 100, 100);

Common uses:

Games
Drawing
Charts
Image processing
Visual effects

15. WebSocket API

WebSockets provide a persistent two-way connection between the browser and server.

const socket = new WebSocket("wss://example.com");

socket.addEventListener("open", () => {
  socket.send("Hello");
});

socket.addEventListener("message", (event) => {
  console.log(event.data);
});

Useful for:

Chat
Multiplayer games
Live dashboards
Real-time applications

16. File API

Access files selected by the user.

<input type="file" id="file" />

const input = document.querySelector("#file");

input.addEventListener("change", () => {
  const file = input.files[0];

  console.log(file.name);
  console.log(file.size);
  console.log(file.type);
});

Browsers restrict file access for security reasons.

17. Clipboard API

Read and write clipboard data.

await navigator.clipboard.writeText("Hello");

Read:

const text = await navigator.clipboard.readText();

console.log(text);

Clipboard operations have security and permission requirements.

18. Geolocation API

Request the user’s geographic position.

navigator.geolocation.getCurrentPosition((position) => {
  console.log(position.coords.latitude);
  console.log(position.coords.longitude);
});

The browser asks the user for permission.

19. Media Devices API

Access devices such as cameras and microphones.

const stream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true,
});

Common uses:

Video calls
Camera apps
Audio recording
Screen/video processing

Permissions are required.

20. Notifications API

Display system notifications.

await Notification.requestPermission();

if (Notification.permission === "granted") {
  new Notification("Hello");
}

The user must grant permission.

21. Web Workers

Run JavaScript in a separate worker context.

Main thread:

const worker = new Worker("worker.js");

worker.postMessage(10);

worker.addEventListener("message", (event) => {
  console.log(event.data);
});

Worker:

self.addEventListener("message", (event) => {
  self.postMessage(event.data * 2);
});

Useful for CPU-heavy work that should not block the main thread.

22. Service Workers

Service workers run independently of a page and can intercept network requests.

navigator.serviceWorker.register("/sw.js");

Common uses:

Offline applications
Resource caching
Progressive Web Apps
Push notifications

23. IndexedDB

IndexedDB is a browser database for larger structured data.

Basic example:

const request = indexedDB.open("MyDatabase", 1);

request.onsuccess = () => {
  const db = request.result;
  console.log(db);
};

Compared with Web Storage:

localStorage
    → simple
    → strings
    → small amounts of data

IndexedDB
    → more complex
    → structured data
    → larger amounts of data
    → asynchronous

24. Performance APIs

The Performance APIs allow you to measure browser operations and page performance.

console.log(performance.now());

Measure a section:

const start = performance.now();

doSomething();

const end = performance.now();

console.log(end - start);

Performance entries:

const entries = performance.getEntries();

console.log(entries);

A PerformanceObserver can observe certain performance entries:

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.startTime);
  }
});

observer.observe({
  type: "paint",
  buffered: true,
});

25. Browser Request → Rendering Flow

A simplified page-load flow:

User navigates
      ↓
Parse URL
      ↓
Cache checks
      ↓
DNS
      ↓
Network connection
      ↓
TLS handshake
      ↓
HTTP request
      ↓
Server
      ↓
HTTP response
      ↓
HTML parsing
      ↓
Discover subresources
      ↓
Download CSS / JS / images / fonts
      ↓
Build DOM
      ↓
Build CSSOM
      ↓
Style calculation
      ↓
Layout
      ↓
Paint
      ↓
Composite
      ↓
Screen

Not every phase has a JavaScript event.

For example:

DNS          → no general JS event
TCP/TLS      → no general JS event
HTML parse   → DOMContentLoaded signals readiness
CSSOM        → no general event
Layout       → no general event
Paint        → performance APIs can expose some milestones
Composite    → no general event

26. Events vs Browser APIs

An important distinction:

Events tell you that something happened.

element.addEventListener("click", handler);

Other browser APIs let you schedule, observe, or perform work.

requestAnimationFrame();
IntersectionObserver;
ResizeObserver;
matchMedia();
fetch();

For example:

User scrolls
    ↓
scroll event

But if the goal is:

"Tell me when this element becomes visible"

use:

IntersectionObserver;

Similarly:

"Tell me when this element changes size"
    ↓
ResizeObserver

"Tell me when the browser is ready for the next frame"
    ↓
requestAnimationFrame()

"Tell me whether this media query matches"
    ↓
matchMedia()

27. Common Browser Events

A practical list:

Mouse / Pointer
----------------
click
dblclick
mousedown
mouseup
mousemove
pointerdown
pointerup
pointermove

Keyboard
----------------
keydown
keyup

Forms
----------------
input
change
submit
reset
focus
blur
focusin
focusout
invalid

Page
----------------
DOMContentLoaded
load
beforeunload
pagehide
pageshow
visibilitychange

Scrolling / Viewport
----------------
scroll
wheel
resize

Clipboard
----------------
copy
cut
paste

Drag and Drop
----------------
dragstart
drag
dragend
dragenter
dragover
dragleave
drop

Media
----------------
play
pause
ended
timeupdate
loadedmetadata
canplay
waiting
error

CSS Animation
----------------
animationstart
animationiteration
animationend
animationcancel

CSS Transition
----------------
transitionrun
transitionstart
transitionend
transitioncancel

Network
----------------
online
offline

28. What to Learn First

For normal frontend development, prioritize these:

Essential

DOM
Events
Fetch
localStorage
URL
History

Rendering / UI

requestAnimationFrame()
Element.animate()
IntersectionObserver
ResizeObserver
matchMedia()
getComputedStyle()

Browser data

IndexedDB
Clipboard API
File API

Advanced

Web Workers
Service Workers
WebSocket
Media Devices
Canvas
Notifications

29. Mental Model

The most useful overall model is:

                    Browser
                       │
        ┌──────────────┼──────────────┐
        │              │              │
       DOM          Network        Rendering
        │              │              │
     Events          Fetch       requestAnimationFrame
     Forms           WebSocket   Element.animate
     CSS classes     URL         IntersectionObserver
        │              │          ResizeObserver
        │              │              │
        └──────────────┼──────────────┘
                       │
                   JavaScript

JavaScript is not directly “the browser.”

JavaScript uses browser-provided APIs to interact with the browser.

JavaScript
    ↓
Browser API
    ↓
Browser subsystem
    ↓
Result / event / rendering

For example:

JavaScript
    ↓
fetch()
    ↓
Network
    ↓
HTTP response
    ↓
JavaScript

Or:

JavaScript
    ↓
requestAnimationFrame()
    ↓
Browser rendering cycle
    ↓
Layout / Paint / Composite
    ↓
Screen

Basics of Browser APIs

1. JavaScript vs Browser APIs

2. DOM API

3. Events

Common events

Mouse

Pointer

Keyboard

Forms

Page lifecycle

4. Fetch API

5. Web Storage

localStorage

sessionStorage

6. URL API

7. History API

8. Rendering and Animation APIs

requestAnimationFrame()

cancelAnimationFrame()

9. Web Animations API

10. CSS-related APIs

getComputedStyle()

classList

matchMedia()

11. IntersectionObserver

12. ResizeObserver

13. requestIdleCallback()

14. Canvas API

15. WebSocket API

16. File API

17. Clipboard API

18. Geolocation API

19. Media Devices API

20. Notifications API

21. Web Workers

22. Service Workers

23. IndexedDB

24. Performance APIs

25. Browser Request → Rendering Flow

26. Events vs Browser APIs

27. Common Browser Events

28. What to Learn First

Essential

Rendering / UI

Browser data

Advanced

29. Mental Model