In this article, we will take a look at JavaScript render-blocking. We recognize 3 types of render-blocking, as stated in the title of this blog post, but first, let’s take a look at what (browser) rendering is.
A simplified view of how browser rendering works
When a browser loads a web page, the first it has to do is read the HTML and then build a DOM tree from the content it reads. The next thing the browser does is parsing the CSS, which can be placed inline, embedded, or external and afterward the browser builds the CSSOM tree from what it sees. After the browser builds a DOM and CSSOM tree, it puts up a Render tree. And when the Render tree is built, the browser starts printing individual elements on the screen.
OK, but what is then render blocking?
So far, we learned that the first thing the browser does is build a DOM tree by parsing the HTML markup. But in that HTML we usually have JavaScript, right? Right. So, during the process of building a DOM tree, whenever the compiler sees the script, even if it’s placed externally, it stops, downloads it, reads (executes) it, and then continues to parse the HTML. Or in other words – when we place .js file reference in the
, the browser will see the reference to the script file at the beginning, it will stop the rendering of the rest of the page because it has to download and run the script and when the browser completes that process it will render the rest of the page.Guess what? This opens a much bigger problem – it opens a problem of JavaScript performance in the browser. Every time the parser encounters a JS file reference (