在正文中异步加载的 JS 使浏览器保持 "loading" 模式

Question

我正在 </body> 标签之前从外部源加载一些 JS。我正在尝试查看如果服务器在尝试为该第三方 JS 提供服务时挂起会发生什么。似乎我页面上的所有内容都运行良好，但浏览器仍在旋转，就好像页面仍在加载一样。有没有一种方法可以加载此 javascript，使浏览器不会等待它声明页面已完全加载？

作为参考，我尝试了以下两种方法来异步加载我的JS：

<script>
  var resource = document.createElement('script');
  resource.src = "https://myserver.com/js/myjs.js”;
  var script = document.getElementsByTagName('script')[0];
  script.parentNode.insertBefore(resource, script);
</script>

和

<script async src="https://myserver.com/js/myjs.js"></script>

Answer 1

你可以通过getscript加载js，勾选这个demo

Answer 2

根据以上评论和我自己的实验整理的答案：

如果您在页面其余部分加载完成后加载第三方JS，那么浏览器将呈现页面，就好像它已完全加载一样，即使外部资源挂起。实现此目的的一种方法是在 window.setTimeout 内加载 JS，超时时间大于页面的标准加载时间。

当您通过 JS 函数而不是通过标准脚本标记加载外部 JS 时，请记住，如果您有任何 data- 属性，它们属于 resource.dataset 对象。

因此，在上面的示例中，

<script async data-my-data="someData" src="https://myserver.com/js/myjs.js"></script>

变成

<script> window.setTimeout(function () { var resource = document.createElement('script'); resource.dataset.myData = "someData"; resource.src = "https://myserver.com/js/myjs.js"; var script = document.getElementsByTagName('script')[0]; script.parentNode.insertBefore(resource, script); }, 5000); </script>

请注意，5000 作为超时对我有用，因为我的页面加载时间不到 5 秒，而且我不需要在前 5 秒内加载的 JS。如果您需要更快或您的页面加载时间更长，则需要调整此数字。另外，正如@adeneo 上面提到的，另一种完成相同事情的方法是稍后通过 ajax 加载 js。

在正文中异步加载的 JS 使浏览器保持 "loading" 模式

JS loaded asynchronously in body keeps browser in "loading" mode

html

javascript

asynchronous

script-tag