javascript - 在浏览器上推迟脚本和执行顺序

Question

我一直致力于为我的一个项目的 HEAD 部分中使用的外部脚本添加延迟属性。我查询了多个延迟脚本标签的执行顺序。

以下是我的观察，可以帮助我们更好地理解我的查询:

根据 http://www.w3.org/TR/html5/scripting-1.html

the defer attribute is present, then the script is executed when the page has finished parsing

defer 属性确实有效。但是，我对执行顺序表示怀疑。看起来它在 FF 和 Chrome 上是不同的。

根据我的项目:

<script defer="defer" src="{SERVER_PATH}/deps.js?1441452359"></script>
<script defer="defer" src="{SERVER_PATH}/script1.js?1440067073"></script>
<script defer="defer" src="{SERVER_PATH}/script2.js?1441451916"></script>

这里，deps.js 是大约 120kb(gzip 压缩)的巨大文件，而 script1-3 是 20-50kb(gzip 压缩)的常规大小。

在 Firefox 上，延迟脚本的执行确实按出现的顺序开始，但不会按相同的顺序完成。而在 chrome 上，除非前一个脚本完成执行，否则下一个脚本的执行不会开始。 Chrome 看起来很有意义。

为了测试执行顺序，我在每个脚本的第一行和最后一行插入了 console.log，例如在 deps.js 中

console.log("Execution Start: deps");
// minified deps script content.
console.log("Execution End: deps");

在 Firefox 的控制台输出下方:

Execution Start: deps
Execution Start: script1
Execution Start: script2
// Script Error as script1 needs deps to render completely.
// Script Error as script2 needs deps to render completely.
Execution End: deps

在 Chrome 的控制台输出下方:

Execution Start: deps
Execution End: deps
Execution Start: script1
Execution End: script1
Execution Start: script2
Execution End: script2

但是，FF 上的行为并不总是如上所示。有时它确实像 Chrome 一样工作。它看起来像是一个仅适用于 Firefox 的问题。或者，可能是因为 deps.js 文件很重并且被缩小并且需要时间来呈现。

任何有类似 defer 经验的人都可以帮助我吗？如果需要任何其他信息，请告诉我。

PS:其他解决方案，例如，将脚本移动到页面底部，我目前不在考虑中。

Answer 1

HTML5.0 规范是这样说的:

If the element has a src attribute, and the element has a defer attribute, and the element has been flagged as "parser-inserted", and the element does not have an async attribute

The element must be added to the end of the list of scripts that will execute when the document has finished parsing associated with the Document of the parser that created the element.

The task that the networking task source places on the task queue once the fetching algorithm has completed must set the element's "ready to be parser-executed" flag. The parser will handle executing the script.

所以它确实说它推迟脚本执行直到相关的 Document 被解析，它还说它被插入列表。所以列表的顺序应该是脚本被解析-插入的顺序。

然而，第二部分让我有点担心。它基本上说它只会被标记为执行，直到网络任务完成下载脚本。然后...“解析器将处理执行脚本”。

我在规范中找不到的是文档解析后脚本执行的情况。当脚本“准备好被解析器执行”时，它是否继续按列表顺序执行脚本？或者它会等到列表中的所有脚本都“准备好执行解析器”后再执行它们。

规范(第 15 步):http://www.w3.org/TR/html5/scripting-1.html#script-processing-src-prepare