It is often cited as good practice for performance:
- Put tags
<script></script>at the bottom of the page, before</body> - Use async:
<script async="async" src="..." ></script>
Which of the two gives the best performance result?
Which improves performance: use "async" or put script at the bottom of the page?
9
asked by anonymous 02.06.2014 / 18:02
2 answers
6
Both alternatives will not interrupt the rendering of the page, so from the user's point of view, it has the same result.
If you plan to support older browsers, put the scripts at the end.
async runs the script as soon as it is downloaded, without interrupting rendering. Use it for scripts that are independent of the order of execution (usually pure js). Note that you do not have support for this feature in IE8.
Placing the script at the end will allow you to render the whole page and then load the script.
Study the content of your page and check for scripts that should be available as soon as the page loads.
02.06.2014 / 18:20
3
To complement the answer
Both async and defer are good for modern browsers, aliases, modern browsers are already loading .js in parallel automatically. Both are supported only in IE 10+, Opera does not dream of having, Chrome 20+ (confirm)
Placing JavaScript files in <head> or scattered in the middle of HTML is bad practice for years. Good practice is always to play before </body> .
For asynchronous loading, I recommend using libraries that aim to load JavaScript in asynchronous parallel, such as LABjs, HeadJS, and ControlJS, from Steve Souders' own web optimization pointer.
using Labsjs will be something like:
<script>
$LAB
.script("framework.js").wait()
.script("plugin.framework.js")
.script("myplugin.framework.js").wait()
.script("init.js").wait();
</script>
To complete the answer:
02.06.2014 / 19:05