Browser Rendering

Have you ever wondered what happens when you type a URL into your browser? Let me break down the browser rendering process into simple, easy-to-understand steps! From requesting HTML files to painting the final pixels on your screen, you'll see each stage that transforms code into a visual experience.

1. Address Input

The client sends a request to the server via the URL.

2. Download HTML File

The server generates a response based on the requested URL, which could be HTML, JSON, or other file types. Here, the browser first downloads the HTML file.

3. Download CSS, JS

During HTML parsing, CSS, JS, and other modules are downloaded.

4. Network Connection Limit (HTTP 1.1)

Each browser has a limit on how many modules it can download from a single domain simultaneously.

Most browsers can download up to 6 modules per domain concurrently under HTTP 1.1. HTTP2 has different constraints and allows more than 6 concurrent requests. To circumvent this limit, developers use domain sharding by downloading modules from multiple subdomains.

5. Create DOM Tree, CSSOM Tree

After downloading HTML and CSS files, the browser parses them to create the DOM tree and CSSOM tree.

6. Create Render Tree

Based on the DOM and CSSOM trees, the browser constructs the Render tree, which consists of objects to be displayed on the screen. Nodes with display: none are excluded from the Render tree.

7. Layout

Using the Render tree, the browser calculates the position and size of each DOM object in the layout process.

8. Paint

Finally, the browser paints elements on the screen based on the layout.

9. Execute JS

JavaScript files are downloaded and executed by the JavaScript engine. Repeated code is compiled by the JIT compiler. More details on the JIT compiler's operation can be found here.

Only after JavaScript execution does the intended content appear on the browser screen.