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

根据上述评论和我自己的实验编写的答案：

如果在之后加载第三方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。

Answer 2

您可以按getscript加载js，请检查此demo

在体内异步加载的JS使浏览器处于“加载”模式

2 个答案: