Progressive Web Application Development by Example

How JavaScript clogs the pipeline

The DOM and CSSOM processes work together to produce what is rendered on the screen, but there is a third part of the rendering cycle, that is, processing JavaScript. Not only is JavaScript a render blocker, it is also a parser blocking process.

This is the primary reason we add script references at the end of the HTML. By doing so, the browser has a chance to parse the HTML and CSS before attempting to load scripts, which blocks the parsing process:

When the browser encounters a script, it stops the DOM and CSS parsers to load, parse, and evaluate the JavaScript. This is one reason I make intentional efforts ...