The latest articles on DEV Community by Sunny Kumar (@sunny_kumar_d236a650ab33a). https://dev.to/sunny_kumar_d236a650ab33a https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2029901%2F8f189348-c9d4-484b-816b-e0b7e9dc15a3.jpg https://dev.to/sunny_kumar_d236a650ab33a en Sunny Kumar Thu, 05 Sep 2024 08:32:43 +0000 https://dev.to/sunny_kumar_d236a650ab33a/mastering-the-critical-rendering-path-optimizing-web-performance-from-request-to-paint-38c0 https://dev.to/sunny_kumar_d236a650ab33a/mastering-the-critical-rendering-path-optimizing-web-performance-from-request-to-paint-38c0 <p>After receiving the HTML response, the browser follows a sequence of steps to render the page:</p> <ol> <li>Loading: The HTML, CSS (render-blocking), and JavaScript (parse-blocking) resources are fetched.</li> <li>Scripting: The HTML is parsed into the DOM (Document Object Model), and CSS is parsed to create the CSSOM (CSS Object Model).</li> <li>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.</li> </ol> <ul> <li>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).</li> <li>After building the DOM from HTML and the CSSOM from CSS, JavaScript is executed.</li> <li>The DOM and CSSOM are merged to create the Render Tree, which is used to calculate the layout.</li> </ul> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4rdw2yzwry9jaov2hyoe.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4rdw2yzwry9jaov2hyoe.png" alt="Image description" width="800" height="373"></a></p> <ul> <li>Finally, the browser paints the content on the screen.</li> </ul> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9mgs3tdnlw271ij9qvyn.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9mgs3tdnlw271ij9qvyn.jpg" alt="Image description" width="800" height="450"></a></p>