具有 asyc 属性的脚本仍会阻止其他脚本执行答案

【问题标题】：Scripts with asyc attribute still block other script execution具有 asyc 属性的脚本仍会阻止其他脚本执行
【发布时间】：2013-11-05 01:16:58
【问题描述】：

注意：我没有开发这个网站 - 我只是需要处理它。

我有一个包含 LAB.js 的文档，用于在头部异步加载一系列脚本。再往下，我还有两个外部脚本，一个在头部下方，另一个在身体顶部。

这两个脚本通常无法访问。它们都被标记为“异步”并且不会阻止文档加载。但是 - 它们显然会阻止其他脚本执行。

需要明确的是，第一系列脚本会立即下载，但似乎要等到其他两个异步脚本下载后才会执行。

站点不公开，jsfiddle 中无法创建此类问题。粗略的说明：

<!doctype html>
<head>
     <!-- This script asynchronously loads many others -->
     <script src="/js/LAB.js"></script>

     <script src="slow-server/js/slowscript1.js" async></script>
</head>
<body>
     <script src="show-server/js/slowscript2.js" async></script>
</body>

关于 Lab.js 的信息：http://labjs.com/

LAB 会将其他几个脚本标签添加到要异步加载的头部。它们都立即下载，但在“慢速服务器”脚本响应之前不会执行。有时需要一段时间。在我看来，对于具有 async 属性的脚本（我正在 Chrome 中进行测试），这似乎是不正确的行为。我有什么遗漏吗？

【问题讨论】：

标签： javascript performance

【解决方案1】：

来自this MDN page：

使用这些可以选择三种可能的模式属性。如果存在 async 属性，则脚本将是异步执行，一旦可用。如果异步属性不存在但 defer 属性存在，那么当页面完成解析时执行脚本。如果两者都不是属性存在，然后获取并执行脚本立即，在用户代理继续解析页面之前。

因此，当脚本具有异步功能时，它将立即从服务器获取，但 DOM 解析将并行继续。这部分简单明了。

然后，一旦异步脚本被获取，它就会被执行。此执行可能在 DOM 完成加载之前或之后，完全取决于加载/解析事物的时间，并且可能在页面中的其他非异步脚本运行之前或之后。

请注意，因为浏览器中的 javascript 是单线程的，一旦这个异步脚本开始执行，在这个脚本完成之前不会运行其他脚本，即使它是“异步”的。脚本上的异步允许继续解析 DOM（而不是阻塞），但它不会阻止脚本在可用时执行，并且一旦执行，其他处理必须等待它完成执行。

如果您希望脚本在 DOM 和 DOM 中的任何常规脚本加载并运行之后才执行，那么您应该使用“defer”，而不是“async”。

仅供参考，如果您想了解所有这些的实际规格，请联系here。

如果您想更详细地解释这一切如何适用于您的具体情况，您至少必须向我们提供您所询问的脚本的伪代码表示，因为您的文字不够清楚跟随。

【讨论】：

感谢您的详尽描述。我不完全理解的唯一部分是其他脚本在获取两个异步脚本时被阻塞，而不是在执行它们时。在我最近的测试中，慢速服务器脚本需要 3 分钟才能响应和下载。其他脚本未能在整个时间内执行。不过，我会尝试推迟，看看它的行为是否有所不同。
@Dygerati - 这里还有其他事情在起作用。浏览器具有一次打开的最大连接数，因此它一次下载的内容的最大数量。所以，如果你有几个大的东西正在下载（即使是异步的），由于连接限制，一些非异步的东西可能会卡在它们后面。
@Dygerati - 另外，请记住，一旦获取脚本，它将在浏览器缓存中，从那时起，可能几乎立即从浏览器缓存中加载。这可能会使它的行为几乎就像它不是异步的一样。异步适用于加载脚本的时间，因此如果它立即从浏览器缓存加载，那么异步不会做太多事情。也许您希望“延迟”来确保在解析 DOM 并运行任何非延迟、非异步脚本之前不会执行这些脚本。