如何防止 JavaScript HTML 阻塞

发布于 2024-08-18 20:55:51 字数 547 浏览 8 评论 0原文

如何防止 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 立即开始并行下载？

原文

How do I prevent JavaScript from blocking other JavaScript's from starting to download?

I have the following on my web site:

<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>

When I use the YSlow Firefox add-on, I can see from the network traffic tab that the google.com/google-maps.js JavaScript won't start downloading until ex.js has finishes downloading.

Question: How can I have both ex.js and google-maps.js begin downloading immediately and in parallel?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

儭儭莪哋寶赑 2024-08-25 20:55:51

使用

async 和 defer 脚本都开始
立即下载，无需暂停
解析器都支持
可选的 onload 处理程序来解决
常见需要执行初始化
这取决于脚本。这
async 和 defer 之间的区别
以脚本何时为中心
被执行。每个async脚本都会执行
后的第一个机会
完成下载并之前
window 的 load 事件。这意味着它是
可能（并且很可能）异步
脚本没有按顺序执行
它们出现在页面中。这
另一方面，defer 脚本是
保证按顺序执行
它们出现在页面中。那次执行
解析完成后开始
已完成，但在文档之前
DOMContentLoaded 事件。

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

defer 是您的最佳选择。脚本将并行下载并同步执行（按顺序）。它也比异步得到更好的支持和更可预测。（另请参阅这个对async/defer<的非常详细的分析/代码>。）

<script defer type="text/javascript" src="script.js"></script>

Use the <script> element's async or defer attribute:

Both async and defer scripts begin to
download immediately without pausing
the parser and both support an
optional onload handler to address the
common need to perform initialization
which depends on the script. The
difference between async and defer
centers around when the script is
executed. Each async script executes
at the first opportunity after it is
finished downloading and before the
window’s load event. This means it’s
possible (and likely) that async
scripts are not executed in the order
in which they occur in the page. The
defer scripts, on the other hand, are
guaranteed to be executed in the order
they occur in the page. That execution
starts after parsing is completely
finished, but before the document’s
DOMContentLoaded event.

defer is supported by IE4+, Firefox 3.5+, Chrome 2+, and Safari 4+.
async is supported by Firefox 3.6+, Chrome 7+, and Safari 5+. (No IE support!)

defer is your best choice. Scripts will download in parallel and execute synchronously (in order). It's also better supported and more predictable than async. (See also this very detailed analysis of async/defer.)

<script defer type="text/javascript" src="script.js"></script>

回复收藏 0 原文

强者自强 2024-08-25 20:55:51

它很丑陋，但您可以通过使用 javascript 注入 DOM 元素来并行下载脚本。

请查看此博文了解工作示例。

回复收藏 0 原文

岁吢 2024-08-25 20:55:51

这对于 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_performac_5.html。

This is normal for inline scripts in HTML. You could add the scripts dynamically using the following code:

<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>

This could cause unexpected results, however - they may not be downloaded and parsed in the correct order, which is important if script 2 references variables or functions from script 1.

If you just want your HTML to load before the scripts load, keep them sequential and put them at the bottom of your HTML file, not in the head tag. This will load the page before downloading and parsing the script. See http://developer.yahoo.net/blog/archives/2007/07/high_performanc_5.html.

回复收藏 0 原文