Javascript 页面完全加载后加载外部JS文件

我创建了一个vanillaJS脚本，供其他几个网站使用。脚本服务器上周宕机了几分钟，结果是几个使用脚本的站点没有正确加载（速度慢、页面根本没有加载、错误等），因为这些站点一直在“等待”外部脚本加载

我注意到所有这些网站都有de head的脚本。我建议将脚本标记移动到页脚，并添加'async'属性。但这是最好的解决方案吗

旁注：

• 无法使用jQuery
• 不能使用像Angular或React这样的框架
• 最好不要在站点本身上使用额外的JS
• 脚本创建了自己的内容，不依赖于任何内容 服务的那一页。它只是创建了一个div，其中包含来自 数据库以非常基本的JS静态服务，以避免跨站点 错误

---

提前感谢。

async

将使脚本异步加载，并将在页面读取时执行。

defer

将使脚本在加载页面后立即执行，尽管这在很大程度上取决于我的测试IE9的浏览器，IE8支持这一点。你可以用这个快速检查一下

但是，还有一种选择，就是将script标记作为

<script>
window.onload = function() {
    var element = document.createElement("script");
    element.src = "vanillaJS .js";
    document.body.appendChild(element);
};
</script>

window.onload=函数（）{
var元素=document.createElement（“脚本”）；
element.src=“vanillaJS.js”；
document.body.appendChild（元素）；
};

---

但我想这些并不能解决由于服务器故障而无法访问脚本的问题。我建议将脚本的本地副本放在网站文件夹中并引用它。

async

将使脚本异步加载，并将在页面读取时执行。

defer

将使脚本在加载页面后立即执行，尽管这在很大程度上取决于我的测试IE9的浏览器，IE8支持这一点。你可以用这个快速检查一下

但是，还有一种选择，就是将script标记作为

<script>
window.onload = function() {
    var element = document.createElement("script");
    element.src = "vanillaJS .js";
    document.body.appendChild(element);
};
</script>

window.onload=函数（）{
var元素=document.createElement（“脚本”）；
element.src=“vanillaJS.js”；
document.body.appendChild（元素）；
};

---

但我想这些并不能解决由于服务器故障而无法访问脚本的问题。我建议将脚本的本地副本放在网站文件夹中并参考。

谢谢您的回复。本地副本最好，但脚本是动态生成的，因此不是选项。下面的Defer可能比async好，您已经提到了。那么您是否会经常更改脚本并希望看到客户端的更改？@mat我已经更新了答案，“Defer”将不支持大多数浏览器。谢谢Vinod！是的，脚本经常变化。这有点像突发新闻剧本。因此，当任何重大事件发生时，它会在所有使用脚本的站点上弹出。脚本本身（包括内容）是在.Net中创建的，以避免JSONP错误。然后，在加载/刷新页面时，您应该尝试获取未缓存的脚本版本。我在CRM中也遇到过同样的情况，最后我用“If Modified-Since”和“Cache-Control”请求头做了一个Ajax。谢谢你的回复。本地副本最好，但脚本是动态生成的，因此不是选项。下面的Defer可能比async好，您已经提到了。那么您是否会经常更改脚本并希望看到客户端的更改？@mat我已经更新了答案，“Defer”将不支持大多数浏览器。谢谢Vinod！是的，脚本经常变化。这有点像突发新闻剧本。因此，当任何重大事件发生时，它会在所有使用脚本的站点上弹出。脚本本身（包括内容）是在.Net中创建的，以避免JSONP错误。然后，在加载/刷新页面时，您应该尝试获取未缓存的脚本版本。我在CRM中也遇到过同样的情况，最后我用“If Modified-Since”和“Cache-Control”请求头做了一个Ajax。