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.
Top comments (1)
Hello everyone,
I hope you're all doing well. I recently launched an open-source project called the Ultimate JavaScript Project, and I'd love your support. Please check it out and give it a star on GitHub: Ultimate JavaScript Project. Your support would mean a lot to me and greatly help in the project's growth.
Thank you!