Loading external javascript via async script tag at the end of a webpage
I'm trying to find out what is the best way to load javascript in terms of page speed.
Let's take this example:
FILE.JS:
// Synchronous delay of 5 seconds
var timeWhile = new Date().getTime();
while( new Date().getTime() - timeWhile < 5000 );
And FILE.HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
SOME HTML
<script src="file.js" async></script>
</body>
</html>
Now do the following:
- Open Firefox
- Go to the url where you put file.js (so after going there file.js must be stored in your cache)
- Press "CONTROL N" to open a new window
- Type the url where you put file.html
If you do this test more often then use file.html?test=2 the second time, because the browser can also cache file.html. You can do the same test with Chrome.
On my computer: Chrome and Firefox both will show "SOME HTML" on the screen AFTER 5 seconds! So it looks like it's not really a good way to speed up your page in terms of rendering.
In my opinion a pretty logical result (from theory), because asynchronous means that the browser can execute the js code when he thinks it's a good moment. But this does not say anything about rendering! Of course "synchonous javascript code" will block the "HTML parser", because javascript can add things to the DOM with for example document.write, but there is also coming html BEFORE the javascript code and that html must also be rendered.
Before executing javascript, the preceding html must be in the "DOM tree", so first "SOME HTML" must have been parsed, before the "js code execution" can start. But this doesn't say anything about rendering. Rendering and "parsing html" are two different things. After the parser is done with "SOME HTML", the renderer will place "SOME HTML" in a "render tree". Before showing it on the screen, the "renderer" will calculate the dimensions et cetera. This also takes some time. We also know that a browser can not show things on the screen, during "javascript execution", because (for example) you can change the style of elements via javascript. To avoid showing and changing some content at the same time, the browser will pause the rendering process while executing javascript (at least Chrome and Firefox are doing it like that at this moment).
So let's say:
y = time between DONE PARSING HTML and DONE RENDERING
If during that time y, the execution of javascript starts, the rendering process will be delayed. I did a lot of tests to check if i could find some consistent results, but that's not the case. Everytime a browser can do things at a slightly different speed, so it just depends if the browser will show some content before or after the javascript execution. That's why i did "CONTROL N" (opening in new window) in this test, because that can have some influence.
So my conclusion: On the internet i see a lot of people pretending that you have to use async, so the javascript will not block rendering. But from my tests and from theory this seems not true. When you have an async script tag, to load an external javascript file, but the external javascript file is in the browsers cache ... then it's kind of the same situation as an inline script, because there is no download time. See for example this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
SOME HTML
<script>
// Synchronous delay of 5 seconds
var timeWhile = new Date().getTime();
while( new Date().getTime() - timeWhile < 5000 );
</script>
</body>
In Chrome and Firefox thet are showing "SOME HTML" after 5 seconds. So the same result as an external javascript file (async loaded via script tag), but taken from cache.
So async is not speeding up anything in terms of rendering? Then why am i reading that everywhere on the internet? It would only be true and useful if a browser would finish rendering, before executing javascript.
I don't get it and i think a browser (and the discussion) needs to focus on "finishing rendering" before "executing javascript". Then async would be useful in terms of "rendering speed", but now not in a lot of cases.
And i did the same test with: "create element -> script tag async" in the head of the page, but it's giving the same results: the browser is showing "SOME HTML" after the execution of external javascript file from cache.
See Question&Answers more detail:
os 
