0

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

例如,假设外部脚本定义了函数one()two()three()four()

<head>
    …
    <script async="async" src="…&quot;></script>
    …
</head>

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

<script> three() </script>

</html>

<script> four() </script>

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

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

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

4

1 回答 1

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>

产生:

1、3、4 和 5 的错误消息,2 的日志条目

但是没有以下一切都可以正常工作async

1、3、4、5 和 2 的日志条目

即你可以确定异步脚本在onload()发生时已经完成,但不是在那之前

所以一般来说,对于异步脚本加载:

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

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

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

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

<script> something = external_function() </script>   <!-- fails -->
于 2020-06-26T20:59:09.297 回答