In this article: https://www.html5rocks.com/en/tutorials/speed/script-loading/
They are saying:
Scripts that are dynamically created and added to the document are async by default, they don’t block rendering
But the "execution of javascript" is always blocking rendering, so how can they say they don't block rendering?
I can make it more clear with this example:
SCRIPT.JS
// Synchronous delay of 5 seconds
var timeWhile = new Date().getTime();
while( new Date().getTime() - timeWhile < 5000 );
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<script>
['script.js'].forEach( function( src ) {
var script = document.createElement( 'script' );
script.src = src;
script.async = true;
document.head.appendChild(script);
});
// Some other javascript execution, let's say execution delay of 2 seconds.
var timeWhile = new Date().getTime();
while( new Date().getTime() - timeWhile < 2000 );
</script>
</head>
<body>
Some HTML line and this is above the fold
</body>
</html>
I tested it in Chrome and Firefox and both browsers are showing: "Some HTML line and this is above the fold" after 7 seconds and not earlier. So the execution of script.js is blocking rendering, because otherwise the browser would show something after 2 seconds.
Notice: You can also do the test without the delay of 2 seconds, but then you can get different results when repeating the the test. With the delay of 2 seconds, i am giving the browser some extra time, so i am sure script.js has been downloaded, before finishing rendering. Anyway you can get the same results without that delay, but it's only to make it more clear in this post.
What is happening here: - The browser first will create the element (async script tag with external file script.js) - Then it starts downloading script.js in parallel, so the everything goes further while downloading script.js - Then the browser is executing the javascript delay of 2 seconds. Meanwhile script.js has been downloaded. - Maybe "Some HTML line and this is above the fold" is already in the DOM, but that's not necessary. Anyway it has not been rendered yet, because there is nothing to see yet on the screen. - Script.js has been downloaded, so it starts to execute the javascript. The execution of Javascript will always block rendering, so now "rendering" has to wait for 5 seconds.
So when scripts are dynamically created, script.js will be downloaded in parallel, but that does not necessarily mean the script is not blocking rendering anymore. They could say the (down)load of script.js is not blocking rendering, but they don't say it like that.
Then how they can say something like that? I don't see it only here, but also in other official Google documentation.
Now people can read it and make something like my example (i only made the "execution time" more bigger with delays, to make it more clear). Then people can think: Nice! The javascript is not blocking rendering, but actually it is blocking, so they could better make other choises in terms of page speed.
