The question is about this article: https://www.html5rocks.com/en/tutorials/speed/script-loading/
They are saying this:
I think the quote is correct, if not fully complete. Rendering is indeed blocked, but not directly; rendering depends upon the parser, which is directly blocked until the javascript finishes execution. So you are correct that the real issue is the parser being blocked, although the render is also being blocked (indirectly) due to its dependence on the parser.
In this code snippet, you can see that the first div
is parsed, but not rendered; the second div
is never parsed in the snippet because it is waiting for the javascript to finish.
<div id="test1">SOME HTML</div>
<script>
document.write( 'bla' );
var parsedDiv = document.getElementById("test1");
alert(parsedDiv.tagName+": "+parsedDiv.textContent);
// Synchronous delay of 3 seconds
var timeWhile = new Date().getTime();
while( new Date().getTime() - timeWhile < 3000 ){
parsedDiv = document.getElementById("test2");
if(parsedDiv)alert(parsedDiv.tagName+": "+parsedDiv.textContent);
}
</script>
<div id="test2">SOME MORE HTML</div>