Question

我想在我的网页上加载非阻止javascript。在支持async之前，最佳做法似乎是通过一个简单的脚本动态加载它。

这是一个可以在第一个<script>：

之前插入的示例

var myscript = document.createElement('script');
myscript.async = true; // cannot hurt, right?
myscript.type = 'text/javascript';
myscript.src = 'myscript.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(myscript, node);

我发现有几个版本在不同的位置插入脚本，例如<head>或<body>的结尾：

document.getElementsByTagName("head")[0].appendChild(myscript);  
document.getElementsByTagName("body")[0].appendChild(myscript);

虽然它是异步的，但顺序似乎很重要in some browsers。浏览器支持方面有什么不同吗？性能？阻止风险？

我在顺序方面没有任何限制（它们不会相互影响）但是我想确保如果我的脚本加载页面内容太长时间内仍然可以正常加载。我认为最后的解决方案效果最好，但我不确定是否存在差异。

Answer 1

您需要使用类似$ script.js：http://www.dustindiaz.com/scriptjs

的内容

Answer 2

将脚本添加到正文末尾是最佳解决方案。它仍然允许加载DOM而不阻塞脚本标记。此外，如果您将脚本放在文档的末尾，则不再需要将函数包装在DOM ready事件中，因为在脚本开始执行时，浏览器已经加载了DOM，您可以直接开始操作它或者订阅一些活动。

Answer 3

您的问题主要集中在负载部分，但实际上性能会受到不同阶段的影响：

负载
解析
执行

因此，在身体末端添加脚本通常被认为不那么突兀。

为了进一步推动它，您可以等待DOM准备好运行您的加载脚本。在这种情况下，无论是将脚本附加到头部还是身体都无关紧要。

[编辑]旁注释：头部和正文标记在html页面中不是必需的。 document.getElementsByTagName('script')[0]在这种边缘情况下是一种很好的方法，因为它可以保证你得到一个元素（页面中至少有你的加载脚本）。

Answer 4

您可以尝试使用等待页面完成的脚本，然后加载要添加的脚本。最近做了这个，页面加载正常，然后出现一个新块。

var Widget = {}
    Widget.myDocReadyInterval = setInterval(function(){
        if (document.readyState === "complete")
    {
        clearInterval(Widget.myDocReadyInterval);
        Widget.startLoading();
    }
}, 20);
Widget.startLoading(){
// do what you need here...
}

在javascript中添加异步脚本的位置

4 个答案: