4

如何防止 JavaScript 阻止其他 JavaScript 开始下载？

我的网站上有以下内容：

<html>
<body>
....
<script type="text/javascript" src="http://example.com/ex.js"></script>
<script type="text/javascript" src="http://google.com/google-maps.js"></script>
</body>
</html>

当我使用 YSlow Firefox 插件时，我可以从网络流量选项卡中看到google.com/google-maps.jsJavaScript 在完成下载之前不会开始ex.js下载。

问题：我怎样才能同时拥有两者ex.js并google-maps.js立即开始下载？

4

4 回答 4

3

使用<script>元素的asyncordefer属性：

async和脚本都defer立即开始下载而无需暂停解析器，并且都支持可选的onload处理程序来解决执行依赖于脚本的初始化的常见需求。 执行脚本的时间async和中心之间的区别。defer每个async脚本在完成下载后和 window'load事件之前第一次执行。这意味着有可能（并且很可能）async 脚本没有按照它们在页面中出现的顺序执行。defer另一方面，脚本保证按照它们在页面中出现的顺序执行。 该执行在解析完全完成后开始，但在document的 DOMContentLoaded事件。

  • defer受 IE4+、Firefox 3.5+、Chrome 2+ 和 Safari 4+ 支持。
  • async受 Firefox 3.6+、Chrome 7+ 和 Safari 5+ 支持。（不支持 IE！）

defer是您的最佳选择。脚本将并行下载并同步执行（按顺序）。它也比async. （另请参阅对/的非常详细的分析asyncdefer。）

<script defer type="text/javascript" src="script.js"></script>
于 2011-05-13T02:48:50.870 回答
2

这很难看，但是您可以通过注入 DOM 元素来并行下载脚本……使用 javascript。

查看此博客文章以获取工作示例。

于 2010-01-26T17:35:12.537 回答
2

这对于 HTML 中的内联脚本是正常的。您可以使用以下代码动态添加脚本：

<script type="text/javascript">
    var head  = document.getElementsByTagName("head")[0]; 
    var sTag1 = document.createElement("script");
    var sTag2 = document.createElement("script");
    sTag1.type = sTag2.type = "text/javascript";
    sTag1.src = "http://example.com/ex.js";
    sTag2.src = "http://google.com/google-maps.js";
    head.appendChild(sTag1);
    head.appendChild(sTag2);
</script>

但是，这可能会导致意外结果 - 它们可能不会以正确的顺序下载和解析，如果脚本 2 引用脚本 1 中的变量或函数，这一点很重要。

如果您只想在脚本加载之前加载 HTML，请保持它们的顺序并将它们放在 HTML 文件的底部，而不是在 head 标签中。这将在下载和解析脚本之前加载页面。请参阅http://developer.yahoo.net/blog/archives/2007/07/high_performanc_5.html。

于 2010-01-26T17:38:54.173 回答
0

JavaScript 文件将始终按照指定的顺序下载。

于 2010-01-26T17:34:32.757 回答