HTML 异步脚本什么时候完成执行？

Question

有很多关于 async 和 defer 如何影响加载时间和外部脚本执行开始的文档，但我找不到任何提到何时脚本完成执行。

例如，假设外部脚本定义函数 one()、two()、three() 和 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>

外部脚本开始与 HTML 并行加载，然后在加载后立即执行。

我很确定 two() 是不真实的，因为它 在被调用时可能 未定义，但我不知道其他的。

是否有任何函数在调用时保证可用？

Answer 1

看起来它们所有都不可靠，除了 onload() 调用。

本页：

<!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>

产生：

但没有 async 一切正常：

即您可以确定异步脚本在 onload() 发生时已完成， 但在此之前不会 .

所以一般来说，对于异步脚本加载：

HTML 中的任何内容都不能依赖脚本的加载。
脚本中的任何内容都不能依赖已加载的 HTML 中的任何内容。

这严重限制了可以使用异步脚本的情况。

异步脚本除了定义函数等之外不能做任何事情。在处理达到 onload 阶段之前，这些功能不能在 HTML 中使用。

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

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

HTML 异步脚本什么时候完成执行？

When do HTML async scripts finish executing?

html

javascript

deferred-loading

HTML 异步脚本什么时候*完成*执行？

When do HTML async scripts *finish* executing?

html

javascript

deferred-loading

HTML 异步脚本什么时候完成执行？

When do HTML async scripts finish executing?