Skip to content

Browser

Understand what a web browser does — rendering, JavaScript execution, caching, and storage.

What you'll learn

  • What a browser is and its core jobs
  • How rendering turns HTML/CSS into pixels
  • How browsers cache resources for speed
  • What localStorage and cookies are for

Concept

Browser

A web browser (Chrome, Firefox, Safari, Edge) is the application that fetches, interprets, and displays web pages. It is the client in the client–server model. To a user it is a window to the web; to a developer it is a runtime, a renderer, and a toolkit.

The Browser's Core Jobs

  1. Fetch — request HTML, CSS, JS, and images from servers.
  2. Parse — read the HTML and build the DOM; read the CSS and build the CSSOM.
  3. Render — combine the DOM and CSSOM into a render tree, lay out elements, and paint pixels on screen.
  4. Execute — run JavaScript via its built-in engine (V8 in Chrome, SpiderMonkey in Firefox).
  5. Respond — fire events when the user clicks, types, or scrolls.

Caching

Browsers cache (save) resources so they do not have to re-download them on your next visit. That is why a site loads faster the second time. As a developer, you control caching with HTTP headers (Cache-Control, ETag). Getting caching right is a major part of web performance.

Storage

Browsers offer several ways to store data on the user's device:

  • Cookies — small key-value pairs sent with every request. Used for sessions and tracking.
  • localStorage — larger, stays until cleared, never sent to the server. Great for user preferences.
  • sessionStorage — like localStorage but cleared when the tab closes.
  • IndexedDB — a database for large, structured data.

Why Developers Care

The browser is your execution environment. Knowing how it renders, caches, and stores helps you build faster, more reliable sites. The browser's built-in DevTools (covered later in this topic) are your primary window into what the browser is doing.

Example

              // Using localStorage to remember a user's theme choice
function applyTheme(theme) {
  document.body.className = theme;
  localStorage.setItem("theme", theme);   // persist
}

// On page load, restore the saved theme
const savedTheme = localStorage.getItem("theme") || "light";
applyTheme(savedTheme);

// A button to toggle the theme
document.getElementById("toggle").addEventListener("click", () => {
  const current = localStorage.getItem("theme");
  applyTheme(current === "light" ? "dark" : "light");
});

localStorage saves the theme so it survives page reloads and browser restarts. Unlike cookies, it is never sent to the server — it is purely client-side state.

Try it

  • JWT Decoder

    Browsers store JWTs in localStorage or cookies. Decode one to see the payload a browser would carry.

Common mistakes

The mistake

Storing sensitive data (passwords, tokens) in localStorage.

The fix

localStorage is readable by any JavaScript on the page, so it is vulnerable to XSS. Use httpOnly cookies for sensitive session data; reserve localStorage for non-sensitive preferences.

The mistake

Assuming every user has the latest browser.

The fix

Check feature support on caniuse.com and provide fallbacks. Older browsers may lack modern APIs. Tools like Babel transpile your code for broader compatibility.

Related Resources

Related Cheatsheets

Look up unfamiliar terms

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

View glossary

Build real projects

Apply what you learned by building guided projects with starter code and solutions.

View projects

Decode error messages

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

View errors