Engrain by ByteRush

WEB.01.01 Mid-level· 10 minCore — asked often

Browser processes and navigation: what happens before the first byte of HTML

How a modern browser splits work into processes, why each site gets its own renderer, what happens step by step when you open a URL, and why one crashed tab does not take the browser down.

Comes up in: Web fundamentals, Frontend system design

Learn#

Ananya has 40 tabs open. A video site’s tab freezes and shows “Aw, Snap!”, but her email and docs keep working. In 2005, one bad page could freeze the whole browser.

Modern browsers split their work into separate operating-system processes. In Chrome, the browser process draws the address bar and tabs and controls the rest. A renderer process turns one site’s HTML, CSS and JavaScript into a page. The GPU process draws to the screen, the network service fetches data, and utility processes handle things such as audio. A crash or freeze stays inside its own process.

Site isolation puts different sites in different renderer processes, even inside one tab. A “site” is the scheme plus the registrable domain: https://maps.google.com and https://mail.google.com are the same site. Isolation means a bug or a Spectre-style attack in one renderer cannot read another site’s memory.

A navigation is everything from pressing Enter to the new page being in charge of the tab:

Opening a URL, process by processStep 1 of 5

State

  • browser process: UI thread

Network

    empty

    Page

      empty

      Console

        empty

        You type flipkart.com and press Enter. The browser process's UI thread decides it is a URL, not a search.

        Read the steps as text
        1. You type flipkart.com and press Enter. The browser process's UI thread decides it is a URL, not a search.
        2. The network service looks up DNS, opens a TLS connection and sends the request.
        3. The response arrives. Its Content-Type is text/html, so this is a page to render, not a download.
        4. The browser picks a renderer process for the site https://flipkart.com and hands it the response: the navigation commits.
        5. The renderer parses HTML, runs JavaScript and paints. When the load event fires, the tab stops its spinner.

        Predict#

        Predict first

        A page on https://asha.in embeds an iframe from https://ads.example.com. With site isolation, where does the iframe run?

        Interview angle#

        Say it like this — about 30 seconds

        “Browsers split work into processes: a browser process for the UI and coordination, renderer processes that run web pages, a GPU process, a network service and utility processes. With site isolation, each site gets its own renderer, even for cross-site iframes, so a crash or an exploit stays contained. On navigation, the browser process fetches the response through the network service, checks it, picks a renderer for the site, and commits. The renderer then parses, styles, lays out and paints.”

        Stays on your device. Nothing is uploaded.
        Follow-up Describe the rendering pipeline from HTML bytes to pixels.
        Parse HTML into the DOM and CSS into the CSSOM, compute styles, lay out, paint into display lists, raster, then composite layers on the GPU (WEB.01.02, WEB.01.03).
        Follow-up What is the difference between a site and an origin?
        An origin is scheme + host + port. A site is scheme + registrable domain, so subdomains share a site but not an origin.
        Follow-up Why did site isolation matter after Spectre?
        Spectre lets code read memory in its own process. Separate processes keep other sites’ data out of reach.

        Practice#

        Guided

        Write the rule browsers use to decide whether two URLs are the same site, using a small public-suffix list.

        Done when

        • site keeps the scheme and the registrable domain, and drops subdomains, ports and paths.
        • Public suffixes such as co.in and github.io are handled.
        • sameSite compares sites, so http and https versions are different sites.
        Your solution
        Ctrl/⌘ + Enter

        Remember#

        Try to answer each card before you open it. Then add them to your reviews.

        What does a renderer process do?

        Turns a site's HTML, CSS and JavaScript into a page.

        What is site isolation?

        Putting different sites in different renderer processes, even inside one tab.

        What makes up a site?

        The scheme plus the registrable domain (eTLD+1).

        What does it mean when a navigation commits?

        The chosen renderer takes over the tab and starts loading the new page.

        Go deeper

        Four layers. Stop at the one your interview needs; each ends with a quick check.

        The core ideaEvery round

        The browser process owns the window, address bar, tabs and permissions. Renderers are sandboxed: they cannot open files or the network directly, and must ask the browser process.

        Check yourself: Which process draws the address bar?

        The browser process.

        How it works underneathSenior rounds

        During navigation, the browser can start a renderer in parallel with the network request to save time. Before committing, it checks the response: a download, a redirect, or a page for a renderer .

        Check yourself: What can the browser do while DNS and TLS are still running?

        Start a renderer process in advance, ready for the response.

        Edge cases and trapsWhere people slip
        The registrable domain comes from the Public Suffix List: asha.github.io and ravi.github.io are different sites. On Android, to save memory, Chrome isolates only some sites, such as sites you log in to.
        Check yourself: Are a.github.io and b.github.io the same site?

        No. github.io is on the public suffix list, so each is its own site.

        In productionStaff-level answers

        Chrome’s Task Manager shows each renderer and its memory, which helps find a leaking tab (JS.12.04). Heavy third-party iframes cost a whole process each .

        Check yourself: Which Chrome tool shows each tab's process and memory?

        Chrome's Task Manager (More tools → Task manager).

        Finished the five steps? Mark it, and its cards join your reviews.

        Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

        Interview questions this answers

        • Describe the browser rendering pipeline from HTML bytes to pixels.