1. You type a URL; the browser finds the server. The browser converts the domain (e.g., example.com) into an IP address via DNS, then opens a network connection (TCP; usually wrapped in TLS for HTTPS). It sends an HTTP request and gets back a response (HTML, JSON, images, etc.).
2. It parses HTML into the DOM. The HTML is tokenized and parsed into a tree called the DOM (Document Object Model). As the parser encounters external files (CSS, JS, images), it schedules fetches for them. Some scripts can block parsing unless marked
3. It builds the CSSOM and computes styles. All styles from CSS files, style, and inline rules are parsed into the CSSOM. The browser then resolves the final computed styles for every node.
4. It creates the render tree, lays out, paints, and composites. From DOM + CSSOM, the browser builds a render tree of what’s actually visible, calculates where each box goes (layout), draws it (paint), and then uses the GPU to stitch layers together (compositing) to pixels on your screen. This sequence is the critical rendering path.
5. JavaScript runs on the page’s main thread (with web workers as an option). JS can read/write the DOM, handle events, fetch data, and trigger re-layout/paint. Efficient sites minimize main-thread work and avoid unnecessary reflows.
6. Security & processes: modern browsers are multi-process. A privileged browser process manages tabs, networking, and storage. Less-trusted renderer processes run site code (HTML/CSS/JS) in sandboxes. Site Isolation keeps different sites in different renderer processes to protect data like cookies and cross-site info.
7. Storage, caching, and performance. Browsers cache resources (to speed up repeat loads) and provide storage APIs (cookies, localStorage, IndexedDB). Performance depends on reducing critical resources, blocking scripts, and large layouts—optimize the critical path to render faster.
Note: The following sections were generated by asking my AI of choice If it could give the reaserch information in a ready-to-paste and are not representative of my work. These are examples of things I'd like to work towards.
How Browsers Work Click to expand the walkthrough URL Resolution: The browser takes the web address (URL), and uses DNS (Domain Name System) to find the correct server’s IP address. Request: It sends an HTTP/HTTPS request to that server asking for the web page. Response: The server replies with HTML (and often CSS, JavaScript, images, etc.). Parsing HTML: The browser reads the HTML and builds a tree structure called the DOM (Document Object Model). Parsing CSS: CSS files are read and turned into a CSSOM (CSS Object Model). Render Tree: The DOM and CSSOM are combined into a render tree that describes what to draw. Layout: The browser calculates where each element should appear on the page. Painting: Pixels are filled in—colors, borders, text, images. Compositing: Layers are combined into the final image shown on screen. JavaScript Execution: JS code runs (usually on the main thread), allowing interactivity. Security: Modern browsers isolate sites in separate processes for safety. Caching & Storage: Data may be cached locally so pages load faster on return visits.