Which improves the performance: use "async" or put <script> at the bottom of the page?

Asked

Viewed 418 times

9

It is often cited as good practice for performance:

  • Tag <script></script> at the bottom of the page, before the </body>
  • Async: <script async="async" src="..." ></script>

Which of the two gives the best performance result?

javascript
  • 2

    I think this is like comparing apples to oranges. Both the shapes you mention have different purposes.

2 answers

6


Both alternatives will not interrupt the page render, so from the user’s point of view, it has the same result.

If you want to support older browsers, put the scripts at the end.

async runs the script as soon as it is downloaded, without interrupting render. Use it for scripts that are independent of the execution order (usually pure js). Note that you do not have support for this feature in IE8.

Putting the script at the end will allow you to render the entire page and only then load the script.

Study the content of your page and check if there are scripts that should be available once the page is loaded.

3

To complement the answer

So much async and defer are good for modern browsers, alias, modern browsers are already loading . js in parallel automatically. Both only supported on IE 10+,Opera doesn’t even dream of having, Chrome 20+ (confirm)

Put Javascript files in <head> or spread in the middle of HTML is bad practice for years. Good practice is always play for before the </body>.

For asynchronous loading, I recommend the use of libraries with the purpose of asymptotically loading Javascript in parallel, such as Labjs, Headjs and Controljs, by Steve Souders himself, Pope of Web Optimization.

http://labjs.com/

using the 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:

http://davidwalsh.name/html5-async

http://labjs.com/documentation.php

  • http://zenorocha.com/html5-async-scripts/ this one with broken link!!!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.