"async" attribute for the <script>

Question

The documentation says about the async attribute: "Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously." I thought that even without this tag all external scripts are executed asynchronously. Was I wrong?

If I have declared several external scripts, will they be downloaded simultaneously or one by one? In which order they will be executed?

<script type="text/javascript" src="js/1.js"></script>
<script type="text/javascript" src="js/2.js"></script>
<script type="text/javascript" src="js/3.js"></script>

The scripts are downloaded asynchronously, but executed synchronously. — JJJ
– JJJ, Commented Sep 9, 2013 at 16:11

Quentin · Accepted Answer · 2013-09-09 16:00:47Z

4

Yes. Scripts are, by default, blocking. HTML parsing will stop until the script has finished executing (noting that some function calls made by the script might be handled asynchronously and those won't block further rendering).

If this wasn't the case, then:

<script src="foo.js"></script>
<p>Hello

and

document.write("foo!");

might insert foo! into the HTML some time after Hello because it would take time for the script to download before being executed.

answered Sep 9, 2013 at 16:00

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

Quentin Over a year ago

@Graduate — The edit changes nothing about my understanding of what you were asking.

Christoph · Accepted Answer · 2013-09-11 07:45:59Z

1

A script element needs to be resolved immediately. If it's an inline script everything is fine, but if it is an external resource, it needs to be downloaded first.

While downloading, it is blocking the page rendering and possibly other downloads. That's why one should put script blocks at the end of the body tag to block as few other processes as possible.

Whether your 3 scripts are downloaded in parallel or one after another depends on the browser. Modern browser do several http requests at the same time and thus have better page rendering times. However, independent from which of the scripts has finished loading first, the order of execution is always fixed - the scripts get executed in the order they appear in your html markup (in your example: 1.js -> 2.js -> 3.js). So a very small .js file which appears last in the source might be avaiable first, but has to wait with execution for all other sourcefiles to be downloaded and executed which appear before.

That's why they introduced async - which basically tells the browser: "The order of execution doesn't matter, just download it and execute it when it's finished donwloading and you have some spare time."

edited Sep 11, 2013 at 7:45

answered Sep 9, 2013 at 16:09

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

2 Comments

mosceo Over a year ago

So if the server you're downoading a script from is not responding, it might block the rendering for seconds?

Christoph Over a year ago

@Graduate Yes. Modern browsers do a lot of stuff to make this issue less worse, but simplified spoken you are blocking the browser from rendering your page until the timeout triggers.

Collectives™ on Stack Overflow

"async" attribute for the <script>

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related