CSS blocks rendering, meaning that while CSS is downloading and the CSSOM is being built no rendering is done on the screen. However the HTML is still being parsed and the DOM is still being constructed.

When Javascript is encountered and starts executing, parsing and rendering are stopped. Parsing is stopped because Javascript can add more nodes to the DOM and also modify the actual HTML with document.write so it’s better not to mix DOM building with potential DOM modifications from running Javascript code.

Moreover Javascript won’t start executing until the CSSOM is done because Javascript can interact with styles so it needs that work finished before making any changes. So depending on the order of JS and CSS files in the source code, the CSS might block the parsing also.

Imagine that you first include a CSS file and then a JS file. The parser first encounters the CSS file and starts downloading it. It then discovers the JS file, stops parsing to fetch to fetch and execute it. However if the CSSOM is not yet ready than JS will halt execution and wait on the CSS.

Only when the previously encountered CSS file has been downloaded and the CSSOM created does the JS begin to execute. All this time parsing has been paused.

HTML | Parsing/Building the DOM | | Parsing is paused to allow JS to execute | | Parsing continued | CSS | Fetching the CSS | | Building the CSSOM | JS | Fetching JS | | Blocked | | JS executes |

What this means is that depending on how large your CSS file is as well as how long your Javascript takes to execute, you could be delaying the user seeing anything on the screen by a lot. And that’s why we work on optimizing the critical rendering path.