How the Browser Renders a Web Page

Understanding how browsers render pages helps you write faster websites. The process has several distinct steps:

1. DNS Lookup — the browser converts the domain to an IP address
2. TCP Connection — a connection is established with the server
3. HTTP Request/Response — the browser fetches the HTML
4. Parsing HTML — the browser builds the DOM tree
5. Parsing CSS — the browser builds the CSSOM tree
6. Render Tree — DOM + CSSOM are combined
7. Layout — the browser calculates positions and sizes
8. Paint — pixels are drawn to the screen

Knowing this process helps you understand why render-blocking scripts slow things down and why CSS should be in the head.