jQuery .ready() 和 <script defer> 之间的交互答案

【问题标题】：Interaction between jQuery .ready() and <script defer>jQuery .ready() 和 <script defer> 之间的交互
【发布时间】：2012-04-12 15:41:24
【问题描述】：

我正在尝试找出我继承的一些代码的问题。

我有一个 HTML 页面

<script type="text/javascript" src="file1.js" defer="defer"></script>
<script type="text/javascript" src="file2.js" defer="defer"></script>
</body>
</html>

file1.js 有

FOO = {
  init : function () {
    var bar = BAR;
  }
}

$(document).ready(FOO.init);

file2.js 有

var BAR = {
}

由于元素上的 defer 属性，可以安全地假设当.ready() 调用FOO.init() 时BAR 可能仍然未定义b/c file2.js 中的代码还没有由于延迟执行而尚未执行？

这将匹配我试图追踪的错误（仅在 IE 中偶尔发生），但我真的想了解 为什么在我着手解决方案之前会发生这种情况。我不知道最初的开发者为什么使用defer，除了对“他必须”这样做的含糊赞扬。

【问题讨论】：

没有答案，但我对你有感觉，伙计。
你了解defer属性吗？因为在我看来这是一件很常见的事情......
我猜原开发者希望在 file1.js 和 file2.js 之前加载另一个脚本（或者他不知道 $(document).ready()...）
@DanielRibeiro，我了解developer.mozilla.org/En/HTML/Element/Script 上记录的有关它的内容，但我从未使用过它。
嗯，根据文档，...since this feature (defer) hasn't yet been implemented by all other major browsers, authors should not assume that the script’s execution will actually be deferred. 是等待加载文档，而不是一些特定的脚本。

标签： javascript jquery deferred-loading

【解决方案1】：

延迟应该会导致脚本被添加到页面完全加载后处理的队列中。根据规范，延迟脚本应该按照它们进入页面的顺序添加到队列中。

但是，不同的浏览器对订单的处理方式略有不同。 IE 似乎按照它们完成加载的顺序运行延迟脚本，而不是它们在页面上出现的顺序。所以你偶尔会看到错误，因为有时它会以正确的顺序加载它们，有时却不是。

请参阅 hacks.mozilla.com 上的 this post 以获取有关不同浏览器如何处理延迟队列排序的更详尽说明和示例。

【讨论】：

【解决方案2】：

Deffering 在 javascript 中优先考虑浏览器何时解释脚本，在某些最佳条件下，如使用 chrome，脚本在页面加载时下载，然后解析和解释。如果你像上面那样使用 defer，你永远无法确定哪个脚本首先加载或解释何时完成。

BAR 可以在一个页面加载时未定义，并在重新加载（缓存）或第二个脚本首先加载时定义。

要对此进行测试，请尝试更改其中一个脚本以强制进行新的下载和解释，并查看存在哪些竞争条件。

【讨论】：