<script> 的“异步”属性答案

【问题标题】："async" attribute for the <script><script> 的“异步”属性
【发布时间】：2013-09-11 15:45:59
【问题描述】：

文档中提到了 async 属性：“设置此布尔属性以指示浏览器应该（如果可能）异步执行脚本。”我认为即使没有这个标签，所有外部脚本都是异步执行的。我错了吗？

如果我声明了多个外部脚本，它们是同时下载还是一个一个下载？它们将按什么顺序执行？

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

【问题讨论】：

脚本是异步下载，但执行是同步的。

标签： html

【解决方案1】：

是的。默认情况下，脚本是阻塞的。 HTML 解析将停止，直到脚本完成执行（请注意，脚本进行的某些函数调用可能会被异步处理，并且不会阻止进一步的渲染）。

如果不是这样，那么：

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

和

document.write("foo!");

可能会在Hello 之后的某个时间将foo! 插入到HTML 中，因为在执行脚本之前下载脚本需要一些时间。

【讨论】：

@Graduate — 编辑没有改变我对您所问内容的理解。

【解决方案2】：

需要立即解析脚本元素。如果是内联脚本一切正常，但如果是外部资源，则需要先下载。

在下载时，它会阻止页面呈现和可能的其他下载。这就是为什么应该将脚本块放在 body 标签的末尾，以尽可能少地阻止其他进程。

您的 3 个脚本是并行下载还是一个接一个地下载取决于浏览器。现代浏览器同时执行多个 http 请求，因此具有更好的页面呈现时间。但是，与哪个脚本首先完成加载无关，执行顺序始终是固定的 - 脚本按照它们在您的 html 标记中出现的顺序执行（在您的示例中：1.js - > 2.js -> 3.js）。因此，最后出现在源代码中的非常小的.js 文件可能首先可用，但必须等待执行才能下载并执行之前出现的所有其他源文件。

这就是他们引入async的原因-它基本上告诉浏览器：“执行顺序无关紧要，只需下载它并在下载完成时执行它，您有一些空闲时间。”

【讨论】：

因此，如果您从中下载脚本的服务器没有响应，它可能会阻塞渲染几秒钟？
@Graduate 是的。现代浏览器做了很多事情来减轻这个问题的严重性，但简单地说，你会阻止浏览器呈现你的页面，直到超时触发。