Exploring How Your Browser Displays Websites!
Tags: javascript, webdev, beginners
Published: 2024-06-28 22:23:31

***

## 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.

<img src="https://images.velog.io/images/bumsu0211/post/a9db8eaf-7c20-431d-872b-c8342c99ed41/Untitled%201.png" width="600" align="left" />

***

### 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.

<img src="https://images.velog.io/images/bumsu0211/post/b2e69eaa-2f6d-4567-a1c9-d4c28a2a47f1/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2021-09-04_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_10.42.31.png" width="900" />

***

### 3. Download CSS, JS

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

<img src="https://images.velog.io/images/bumsu0211/post/23eea083-3978-4860-a7e8-3c6c435ae12f/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2021-09-04_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_10.47.45.png" width="950" />

***

### 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.

<img src="https://images.velog.io/images/bumsu0211/post/140a2a67-040d-4167-80ab-5dae6dfcf81e/Untitled%207.png" width="470" align="left"/>
<img src="https://images.velog.io/images/bumsu0211/post/c75189bb-3613-4dfa-be71-7404fb6ba480/Untitled%208.png" width="470" align="left" />

***

### 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.

<img src="https://images.velog.io/images/bumsu0211/post/0c3bd724-a2b3-45bc-bbdc-5a14b9fb9994/Untitled%209.png" width="900" />

***

### 7. Layout

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

<img src="https://images.velog.io/images/bumsu0211/post/5a539af6-1d12-4b8d-b118-a98a4c789869/Untitled%2010.png" width="600" />

***

### 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](https://example.com).

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

***