How the browser renders a web page? (III)
Information drawn from
Render blocking CSS & DOMContentLoaded
Now that we understood how the browser renders a web page from some HTML Text to individual pixels on the screen, we need to understand how we can make this process efficient for better user experience.
But if the browser encounters
<link rel="stylesheet"> element which is used to load external CSS, it will send a request to fetch .css file asynchronously and again move on to parse other HTML elements below it.
However, that’s not the case with
But there is a caveat. CSS is a render-blocking resource which means until external CSS is downloaded and parsed, the browser will not render anything on the screen. Technically, that means it will block CSSOM from being fully constructed, so critical rendering path is stuck. This also means as CSSOM construction blocked, our DOMContentLoaded event won’t be fired by the browser. So we can say that external stylesheets might load asynchronously, but they will be parsed synchronously.
We can visualize this in Chrome DevTools console. Going forward, let’s take the below example to test the critical rendering path. Inside the project repository, I have set up an express server to provide custom delays in external files, like for example, request for style.css will be resolved after 5000ms.
<html lang='en'> <head> <title>Rendering Test</title> <link rel='stylesheet' href='/5000/css/style.css'> </head> <body> <img src="/10000/res/nature.jpg" /> <h1>I am first!</h1> <script src="/1000/js/main.js"></script> <h2>I am second!</h2> <script src="/2000/js/common.js"></script> <h3>I am third!</h3> <script src="/3000/js/vendor.js"></script> </body> </html>
From the above screenshot, we can tell that DOMContentLoaded the event was fired after 6.5s which is labelled with DCL while window.onload event was fired after 10s which is labelled with L.
Let’s see the network panel and see how the browser is treating each resource individually. We are also logging DCL and L events.
We also had another external resource which is an image file and it keeps loading in the background. After it was loaded, window.onload event was fired after 10.2s.
You can add media attributes to your external stylesheet elements which will be loaded and parsed asynchronously based on environmental conditions.
The job of creating DOM Tree, CSSOM Tree and handle rendering logic is done using a piece of software called as Browser Engine also called as Rendering Engine or Layout Engine. These Browser engines contain all the necessary elements and logic to render a web page from HTML file to actual pixels on the screen.
If you have ever heard of WebKit, all the time, you were talking about a browser engine. WebKit is used by Apples Safari browser and was default rendering engine for Google Chrome browser. As of now, the Chromium project uses Blink as the default rendering engine. Here is a list of different browser engine used by some of the top web browsers.
Last update on 24 Feb 2020