4

我想在我的页面上加载一个非阻塞的 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);

尽管顺序是异步的，但在某些浏览器中似乎很重要。在浏览器支持方面有什么不同吗？表现？阻塞风险？

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

4

4 回答 4

2

你会想要使用类似 $script.js 的东西：http ://www.dustindiaz.com/scriptjs

于 2013-01-08T21:45:48.047 回答
1

在正文末尾附加脚本是这里最好的解决方案。它仍然允许在不阻塞脚本标签的情况下加载 DOM。此外，如果您将脚本放在文档的末尾，则不再需要将函数包装在 DOM 就绪事件中，因为在您的脚本开始执行时，浏览器已经加载了 DOM，您可以直接开始操作它或订阅一些事件。

于 2013-01-08T21:46:22.697 回答
1

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

  • 加载
  • 解析
  • 执行

出于这个原因，在正文末尾添加脚本通常被认为不那么突兀。

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

[编辑] 旁注：head 和 body 标签在 html 页面中不是强制性的。document.getElementsByTagName('script')[0]在这种边缘情况下是一种好方法，因为它保证您将获得一个元素（页面中至少有您的加载脚本）。

于 2013-01-08T21:48:38.737 回答
1

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

var Widget = {}
    Widget.myDocReadyInterval = setInterval(function(){
        if (document.readyState === "complete")
    {
        clearInterval(Widget.myDocReadyInterval);
        Widget.startLoading();
    }
}, 20);
Widget.startLoading(){
// do what you need here...
}
于 2013-01-08T21:49:03.490 回答