javascript - 为什么带有异步标记的较小尺寸的脚本会其次执行？

Question

我试图了解异步标记的工作。假设我的 html 中有以下代码:

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/big.js"></script>
    <script src="js/small.js" async></script>
</head>

脚本big.js要大得多，在small.js之后加载并且仍然先执行，事件small.js添加了async标签。 async 标签不应该保证脚本下载后立即执行吗？

注意:如果我将异步放入 big.js 脚本，则首先执行 small.js。

Answer 1

首先，对于异步脚本的执行顺序无法保证。也就是说，您所描述的行为是由您的代码本身造成的。

如果 big.js 未使用 async 加载，因为它在 DOM 中位于 small.js 之前，则由指定它将首先执行。事实上，在执行 big.js 之前，浏览器无法执行任何其他 JavaScript。这是因为没有async加载的脚本不是异步的。它们保证是同步的。

请注意，尽管如此，small.js 仍然可以下载异步。事实上，浏览器可以异步下载所有资源，无论它们是否明确标记为异步。该规范仅强制执行有关执行顺序的规则，仅此而已。