After receiving the HTML response, the browser follows a sequence of steps to render the page:
- Loading: The HTML, CSS (render-blocking), and JavaScript (parse-blocking) resources are fetched.
- Scripting: The HTML is parsed into the DOM (Document Object Model), and CSS is parsed to create the CSSOM (CSS Object Model).
- Rendering: The DOM and CSSOM are combined to generate the Render Tree. 4 . Painting: After the Render Tree is built, the layout is calculated, and the page is painted on the screen.
- When the page request is made, the browser receives HTML, CSS, and JavaScript. CSS blocks rendering until fully loaded (render-blocking), and JavaScript blocks parsing until it’s executed (parse-blocking).
- After building the DOM from HTML and the CSSOM from CSS, JavaScript is executed.
- The DOM and CSSOM are merged to create the Render Tree, which is used to calculate the layout.
- Finally, the browser paints the content on the screen.