54

async="async" attribute of a <script> tag in HTML, What does it mean?

<script async="async" src="...."></script>

Can be see used here for example

Improve this question
1
  • YT Commented Jan 2, 2024 at 11:18

6 Answers 6

Reset to default
60

If the async attribute is set on an external script (one with src=), browsers that support it will download that script in the background without blocking the rest of the content on the page. The script will execute whenever it is finished downloading.

http://dev.w3.org/html5/spec/Overview.html#attr-script-async

As I mentioned in a comment, setting async=true, async=false or async=anything all mean the same thing. They enable the async behavior. The only way to make a script non-async is to completely omit the attribute.

http://dev.w3.org/html5/spec/Overview.html#boolean-attributes

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

So I don't need to place javascript at the bottom of the page if I remember to make it async, right?
First link's anchor doesn't work anymore and there's no mention of async on the document.
24

In XHTML it is needed to consequently note attributes as attributes and their values whereas HTML does not. I like the conformity of that principle so I always use it in the form of:

async="async"

This way I can serve my documents as application/xhtml+xml.

If this is not of any interest for you because you are of the opinion that serving your document as text/html is good enough, then you can always use:

async
Improve this answer

3 Comments

Your answer is informative (about doc/mime types) but it did not address my actual question: what the attribute async does?
I am sorry that I was not on topic.
Async is a new HTML5 attribute for the script element. It causes the browser to continue parsing the rest of the page when it finds a script tag instead of parsing the script first and then continue parsing the page. I found an interesting tutorial about this: youtube.com/watch?v=KHSeGURldw8
5

It simply means

  1. Download the External Script asyncronously ( or in parallel ) without blocking the html parsing.
  2. The Script once downloaded will be Executed Immediately blocking the html parsing.


Here's a nice illustration.

Note : This attribute works only for the external scripts ( the one's with the src attribute ) and not inline scripts.

Improve this answer

Comments

5

The HTML WHATWG specification contains the following explanation:

For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available (potentially before parsing completes). If the async attribute is not present but the defer attribute is present, then the classic script will be fetched in parallel and evaluated when the page has finished parsing. If neither attribute is present, then the script is fetched and evaluated immediately, blocking parsing until these are both complete.

For module scripts, if the async attribute is present, then the module script and all its dependencies will be fetched in parallel to parsing, and the module script will be evaluated as soon as it is available (potentially before parsing completes). Otherwise, the module script and its dependencies will be fetched in parallel to parsing and evaluated when the page has finished parsing. (The defer attribute has no effect on module scripts.)

This is all summarized in the following schematic diagram:

enter image description here

The exact processing details for these attributes are, for mostly historical reasons, somewhat non-trivial, involving a number of aspects of HTML. The implementation requirements are therefore by necessity scattered throughout the specification. The algorithms [described in the HTML specification] describe the core of this processing, but these algorithms reference and are referenced by the parsing rules for script start and end tags in HTML, in foreign content, and in XML, the rules for the document.write() method, the handling of scripting, etc.

The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the blocking behavior that is the default.

Improve this answer

Comments

2

Seems it doesn't need to be async=async either, but just async

From google:

A second technique is to use the attribute where appropriate, which prevents parsing from blocking the initial page load by deferring it until the browser's UI thread is not busy doing something else.

https://developers.google.com/speed/docs/best-practices/mobile#DeferParsingJS

Improve this answer

Comments

1

Just async in enough.

You may try both and then measure the difference in page speed. Like crictime uses single substance for that.

Improve this answer

2 Comments

No, it is not in all cases.
In the case of XHTML, served as application/xml+xhtml it is a fatal error and causes the page to freeze when you note an attribute like that.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.