异步 JS 在头部加载答案

【问题标题】：Async JS loading in head异步 JS 在头部加载
【发布时间】：2011-07-13 17:55:05
【问题描述】：

我需要将脚本异步加载到页面上。我正在使用 createElement 方法在头部动态插入脚本标记。发生的事情是首先加载页面源。完成后，头部中包含的所有元素将并行加载。一旦这一切都加载完毕，我动态添加的脚本就会加载。

这在逻辑上是有道理的，但我正在寻找一种可以加速动态脚本加载的方法。我仍然希望它是异步的（不想做 document.write），但如果这个脚本可以与 head 元素的其他脚本并行加载，我仍然会喜欢。任何方式我都可以让它工作

谢谢

【问题讨论】：

【解决方案1】：

在顶部放置几行 javascript，创建动态脚本标记。

<script>
var script = document.createElement("script");
    script.src = "yourfile.js";
    script.async = true; //asynchronous
    document.getElementsByTagName("head")[0].appendChild(script);
</script>

有关其他选择，请查看此链接：http://friendlybit.com/js/lazy-loading-asyncronous-javascript/

【讨论】：

我正在这样做，但在 HEAD 内部。你推荐它在头顶上做吗？我认为这不是有效的 HTML，它会在浏览器中异步工作吗？
我刚刚明白你想要做什么，更新了答案

【解决方案2】：

如果您使用 HTML5，您可以将属性 async 添加到 script 元素。这是最简单的方法，无论您在哪里加载（但不是最兼容的）。需要明确的是，即使上面提供的代码也只有在您使用 HTML5 时才有效。问题是，您根本不必费心添加这样的脚本。

<script src="/path/to/your/js/here" async></script>

还要注意 XHTML 不允许属性最小化，所以在 XHTML 中你必须使用

<script src="/path/to/your/js/here" async="async"></script>

此外，您还有一个 defer 属性，它会延迟 javascript 的解析，直到文档加载完成，它也可以用作 defer="defer"，这与我使用 async 显示示例脚本包含的方式相同。 async 和 defer 标签可以在同一个脚本元素中使用。

还要注意，这些属性只能添加到文档外脚本而不是内联脚本，这意味着如果不使用 src 属性，则不能使用 async 和 defer。

希望对您有所帮助！ :)

【讨论】：