Chapter 29 · Browser Internals

Knowledge Check

8 min read

Try to answer before you open the answers. Guessing is fine; checking your guess is how you learn.

QUICK REVIEW (5 minutes)

  1. Name three kinds of process in a Chromium browser and say what each does.
  2. What key opens the browser's own Task Manager in Chrome and Edge?
  3. What are the steps from HTML and CSS to pixels? (Put them in order.)
  4. About how many milliseconds does one frame get at 60 Hz?
  5. What is the difference between the call stack and the task queue?
  6. Which HTTP status codes mean "OK", "moved permanently", "not found" and "server error"?
  7. What does HTTP/3 run on instead of TCP?
  8. What are the three parts of an origin?
  9. Which cookie flag stops JavaScript from reading a cookie?
  10. Where does sessionStorage data go when you close the tab?

ANSWER KEY — DO NOT READ UNTIL YOU'VE ANSWERED

Click to reveal answers

1. Process types

The browser process (window, tabs, coordination), renderer processes (run web pages in a sandbox), and the GPU process (draws and composites using the graphics card). Others: network service, utility and extension processes.

2. Task Manager key

Shift + Esc.

3. From text to pixels

HTML → DOM, CSS → CSSOM, combine into the render tree, layout, paint (and raster), composite on the GPU, then the display.

4. Frame time

About 16.7 ms (1000 ms ÷ 60).

5. Stack vs queue

The call stack holds the functions running right now. The task queue holds waiting events (clicks, timers, network results) that the event loop takes when the stack is empty.

6. Status codes

200 OK, 301 moved permanently, 404 not found, 500 server error.

7. HTTP/3 transport

QUIC, which runs over UDP.

8. Origin

Scheme + host + port.

HttpOnly.

10. sessionStorage

It is deleted when that tab (or window) closes.

UNDERSTANDING QUESTIONS

Q1. Why does a browser use many processes instead of one, and what does it cost?

Answer A crash stays in one process, so other tabs survive; and separate memory spaces make it much harder for a hacked page to read another site's data. The cost is more RAM, since each process has its own copies of some data. Browsers reduce this by sharing, reusing and sleeping unused tabs.

Q2. Why does a long-running script freeze the page, but a Web Worker does not?

Answer Page JavaScript, style, layout and much painting share one main thread, so a long task stops clicks and updates. A Web Worker is another thread with no DOM access, so heavy work there leaves the main thread free; it sends the result back by message.

Q3. Why is HTTP/3 faster to start and better on bad networks than HTTP/2?

Answer QUIC combines the connection and TLS handshakes (about one round trip). Its streams are independent, so one lost packet delays only its own stream, whereas on TCP every HTTP/2 stream waits for the lost packet to be resent. QUIC can also keep a connection when your network changes.

Q4. The same-origin policy allows <img src="other-site">. Why is that safe, but reading the reply of a fetch to that site is not?

Answer An image tag only lets the page display the picture; the page's script cannot see its bytes. A fetch response gives the script the actual data, which may be private (logged-in pages, with cookies attached). The SOP protects reading, not embedding.

Q5. Why does a reflow cost more than a repaint, and what is the cheapest kind of change?

Answer Reflow recalculates sizes and positions for boxes (which can affect many others), then paint and composite follow. A repaint only redraws appearance. Changing only transform or opacity can be done in the GPU compositor, skipping layout and paint.

SCENARIO QUESTIONS (Troubleshooting)

S1. One tab shows "Aw, Snap!" but all other tabs still work. Why?

Answer Each page (or site) runs in its own renderer process. Only that renderer crashed; the browser process and other renderers were not affected. Reload the tab.

S2. A page you built is stuck and shows "Page unresponsive". Your script has a loop with millions of steps. What is the fix?

Answer The loop holds the main thread. Break the work into small chunks that yield to the event loop, or move it into a Web Worker.

S3. Browser says "Your connection is not private" for a normal site. What might be wrong?

Answer Certificate checks failed: the certificate may have expired, the name may not match, the issuer may be untrusted, or your PC's clock may be wrong. A proxy or network device that intercepts HTTPS can also cause it. Check the date and time first and do not enter passwords if unsure.

S4. A web app shows a red CORS error in the Console when calling an API on another domain. Can you fix it in the page's JavaScript?

Answer No. The server must send the right Access-Control-Allow-Origin (and related) headers. The page cannot override the browser's check. The API owner must allow your origin, or you can call the API through your own server.

S5. After you clear cookies and site data, a site logs you out and a note app loses a draft. Why?

Answer The session cookie was your login key, so removing it logged you out. Unsynced data was kept in localStorage or IndexedDB, which were cleared too. That is why you should treat browser storage as a cache, not as the only copy.

INTERVIEW QUESTIONS

I1. What happens when you type a URL and press Enter?

Answer Parse the URL; check HSTS and the cache; resolve the name with DNS; open a TCP or QUIC connection; do the TLS handshake; send an HTTP request; receive the response; parse HTML into a DOM while fetching CSS, JS and images; build the CSSOM; run JavaScript; build the render tree, layout, paint; composite on the GPU; and display the frame through the display pipeline.

I2. Explain the event loop and the difference between microtasks and tasks.

Answer JavaScript runs on one main thread. The event loop runs one task from the queue until the stack is empty, then runs all microtasks (promise steps), then may render a frame, then repeats. So a promise callback runs before a zero-delay setTimeout callback.

I3. Compare cookies, localStorage, sessionStorage and IndexedDB.

Answer Cookies are small (about 4 KB) and sent to the server automatically; localStorage is about 5 MB per origin, text only, persistent, never sent; sessionStorage is the same API but per tab and deleted when the tab closes; IndexedDB is an asynchronous, transactional database for large structured data.

I4. What is CORS and what is a preflight request?

Answer CORS lets a server tell the browser which other origins may read its responses, using headers such as Access-Control-Allow-Origin. For risky requests the browser first sends an OPTIONS preflight asking whether the real request is allowed, and only sends it if the server agrees.

I5. Describe XSS and CSRF and one defence for each.

Answer XSS: attacker-supplied text runs as a script inside a trusted site; defend by escaping output, using a Content Security Policy and HttpOnly cookies. CSRF: another site makes your browser send a request with your cookies; defend with SameSite cookies and anti-CSRF tokens.

PRACTICAL TASK

Draw "My browser loads a page" on one page. Pick a public page. Using DevTools' Network tab (Timing) and Windows Task Manager, draw the chain from Section 7 as a vertical diagram. Next to the boxes DNS, connect, TLS, request and response, write your own measured times in milliseconds. Add a note for the protocol shown (h2 or h3), the status code, and the number of chrome.exe or msedge.exe processes in Task Manager.

Why This Matters

When a page is slow, this map tells you where the time goes: network (DNS, connect, TLS, waiting), download, or the browser's own work (script, layout, paint). Knowing the stage lets you choose the right fix instead of guessing.

CHAPTER SUMMARY

  • A modern browser is many processes: a browser process, renderer processes (one per site, sandboxed), a GPU process, a network service, and utility and extension processes. This gives crash containment and security at the cost of RAM.
  • The rendering engine (Blink, WebKit, Gecko) turns HTML into a DOM and CSS into a CSSOM, builds a render tree, then does layout, paint and GPU compositing. About 16.7 ms per frame at 60 Hz.
  • The JavaScript engine (V8, SpiderMonkey, JavaScriptCore) parses, interprets to bytecode and JIT-compiles hot code. The event loop runs one main thread; long scripts freeze the page; Web Workers add threads.
  • Network: URL, DNS, TCP or QUIC, TLS, HTTP with methods, status codes and headers; HTTP/2 multiplexes, HTTP/3 uses QUIC over UDP; caching and keep-alive save round trips.
  • Storage: cookies (Secure, HttpOnly, SameSite), localStorage, sessionStorage, IndexedDB, Cache Storage and the HTTP cache in the profile folder.
  • Same-origin policy blocks reading across origins and allows embedding; CORS opens it on purpose; XSS and CSRF are defended by escaping, CSP and SameSite.
  • The full chain from keypress to pixels ties together Chapters 9, 10, 26, 27, 28 and 32.