When do HTML async scripts finish executing?

Question

There is a lot of documentation about how async and defer affect the timing of the loading and the start of execution of external scripts, but I can't find anything that mentions when the script finishes executing.

For instance, suppose the external script defines functions one(), two(), three(), and four():

<head>
    …
    <script async="async" src="…"></script>
    …
</head>

<body>
    …
    <script> window.onload="one()" </script>
        …
    <script> two() </script>
</body>

<script> three() </script>

</html>

<script> four() </script>

The external script starts loading in parallel with the HTML, and then executes as soon as it's loaded.

I'm pretty sure that two() is unrealiable, as it could be undefined when it gets called, but I don't know about the others.

Are any of the functions guaranteed to be available when they are called?

Ray Butterworth · Accepted Answer · 2020-06-29 18:02:50Z

It looks like they are all unreliable, except for the onload() invocation.

This page:

<!DOCTYPE html>
<html>

<head>
    <title>Load script</title>
    <meta charset="UTF-8" />
    <script async="async" src="script.js"></script>
    <script> one() </script>
</head>

<body onload="two()">
    <p>Test</p>
    <script> three() </script>
</body>

<script> four() </script>

</html>

<script> five() </script>

produces:

but everything works fine without the async:

I.e. you can be sure the async script has finished when the onload() happens, but not before that.

So in general, for async script loading:

Nothing in the HTML can rely on the script's having been loaded.
Nothing in the script can rely on anything in the HTML having been loaded.

That severely restricts the circumstances under which async scripts can be used.

The async scripts must not do anything other than defining functions, etc. And those functions can't be used in the HTML until the processing has reached the onload stage.

<tag onclick="external_function()"> ... </tag>       <!-- works -->

<script> something = external_function() </script>   <!-- fails -->

Collectives™ on Stack Overflow

When do HTML async scripts finish executing?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related