Question

如何阻止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.js JavaScript在ex.js完成下载之前不会开始下载。

问题：如何让ex.js和google-maps.js同时开始并行下载？

Answer 1

使用<script>元素的async or defer attribute：

async和defer脚本都开始了立即下载而不会暂停解析器，都支持解决问题的可选onload处理程序常见的需要执行初始化这取决于脚本。该 async和defer之间的差异以脚本为中心执行。每个async脚本都会执行在它之后的第一次机会完成下载和之前 window的{{1}}事件。这意味着它可能（可能）load 脚本不按顺序执行它们出现在页面中。该另一方面，async脚本是保证在订单中执行它们出现在页面中。执行完全解析后启动完成，但在defer之前 document事件。

DOMContentLoaded。
defer。（没有 IE支持！）

async是您的最佳选择。脚本将下载并行执行同步（按顺序）。与defer相比，它也得到了更好的支持和更可预测。（另见this very detailed analysis of async/defer。）

async

Answer 2

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

查看this blog post了解工作示例。

Answer 3

这对于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文件的底部，而不是头文件标记中。这将在下载和解析脚本之前加载页面。请参阅http://developer.yahoo.net/blog/archives/2007/07/high_performanc_5.html。

Answer 4

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

如何防止JavaScript HTML阻止

4 个答案: