3

If an external script defines functions referred to in the HTML (e.g. onclick=...), the script should be located in the <head> so that it will be downloaded immediately to make the functions available to the HTML:

<script src="/.JS/onclicks.js" />

If an external script makes changes to the HTML (e.g. modifies everything with class="special"), it should either be located after the <body>, or located in the <head> with execution deferred until all the HTML has loaded:

<script src="/.JS/highlight-special.js" defer="defer" />

Using defer has the advantage of allowing the script to be downloaded in parallel with the HTML, making the page load more quickly.

There is also the option of providing a script source in the <head> and specifying the async attribute:

<script src="/.JS/highlight-special.js" async="async" />

Like defer, the script is loaded in parallel with the HTML, but rather than waiting until the HTML has loaded to be executed, as soon as the script has loaded the HTML processing temporarily halts while the script executes.

Under what circumstances would using async be useful?

Specifically, the timing isn't predictable, so there doesn't seem to be any advantage to running the script before the HTML has loaded (something that would finish sooner had defer been specified instead).

2

The async attribute is useful for a script that:

  1. Doesn't depend on whether the HTML is fully loaded
  2. Shouldn't block the HTML
  3. Yet should still be executed ASAP

A perfect example of this is an analytics script. If you loaded it without any attributes, it would block the rest of the page's rendering. If you loaded it with defer, it would run unnecessarily late in the page cycle, and you might miss sending a pageview event.

For an analytics script, async is just right. Non-blocking, yet still executes asap.

|improve this answer|||||
1

Loading scripts using async means that the loading process of your scripts will not interrupt the rendering of your webpage.

This allows your web page to render more quickly as parsing is not paused every time a script must be loaded. This also allows for multiple scripts to be loaded concurrently which is beneficial given that one script does not depend on another.

If running your site through a speed test and receive the recommendation to prefer async resources, simply add the async attribute to your scripts like so: .

Provided that these resources are not required for the initial loading of the web page and also do not need to be executed in a particular order, the async script attribute will help improve the overall deliverability and speed of your site.

The page content shows up immediately: async doesn’t block it.

DOMContentLoaded may happen both before and after async, no guarantees here. Async scripts don’t wait for each other. A smaller script small.js goes second, but probably loads before long.js, so runs first. That’s called a “load-first” order.

Async scripts are great when we integrate an independent third-party script into the page: counters, ads and so on, as they don’t depend on our scripts, and our scripts shouldn’t wait for them:

|improve this answer|||||
  • The statement "async means that the loading process of your scripts will not interrupt the rendering of your webpage" is also true for "defer". It's what happens after the load that is different. "defer" waits for the HTML to finish rendering before running the script, but "async" stops the rendering and runs the script as soon as it has loaded. I.e. The statement "content shows up immediately: async doesn’t block it" isn't true. Generally, "defer" will render the HTML sooner than "async", which will render it sooner than with neither attribute. – Ray Butterworth Mar 29 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.