在页面完全加载后执行不重要的 Javascript 文件答案

【问题标题】：Execute unimportant Javascript files after the page fully loads在页面完全加载后执行不重要的 Javascript 文件
【发布时间】：2021-03-06 07:26:10
【问题描述】：

在我的网站中，我有许多 javascript 文件，例如：

<script src="script1.js"></script>
<script src="script2.js"></script> 
<script src="script3.js"></script> 
<script src="script4.js"></script>
<script src="script5.js"></script>

这些会减慢我网站的加载时间。所以我的想法是在页面完全加载后 2 秒加载这些脚本文件，我已经在使用 defer 但我想更延迟地加载这些（脚本文件）以更快地加载我的页面。

【问题讨论】：

为什么有这么多文件？您是否考虑过将它们全部合并到一个或两个文件中？
是的，但我经常添加新脚本，并且由于脚本被缓存，有时新代码无法反映可能造成问题的原因
Cache busting 会解决这个问题。无需因为当前文件可能被缓存而不断添加新文件。
如果有人的网速很慢，那么整个脚本可能无法下载，从而导致某些功能无法正常工作。此外，如果我对包含所有 JavaScript 代码（如您所说）的脚本进行微小更改或重大更改，然后“缓存破坏”整个脚本文件，那么所有代码都将不必要地被“缓存破坏”
脚本在完全下载之前不会执行 - 浏览器不会执行由于未完全加载而“损坏”的代码。无论哪种方式，用户都需要下载所有 JS，无论是在一个文件中还是分布在 20 个文件中。我确实查看了您网站上的脚本，但它们都不是很大（除了 jquery）。您确定是脚本减慢了您网站的加载时间吗？

标签： javascript

【解决方案1】：

let scriptSources = ['script1.js', 'script2.js', 'script3.js'];

scriptSources.forEach(loadLater)

function loadLater(item, index) {
    
setTimeout(function(){ 

    let script =  document.createElement('script');
    script.src = item;

    document.body.appendChild(script); 
    
    }, 2000 * (index + 1) );
}

【讨论】：

如果我把时间从2000ms改成100ms会有什么问题吗？
你可以一直玩计时，部分是计时:)
我只是 JavaScript 的初学者，在我的网站上使用它安全吗？
在部署到您的网站之前，您应该在本地机器上测试任何代码。此函数将在读取我不知道您的项目的项目数组后停止；）

【解决方案2】：

这里最好的选择是使用内部 js，而不是外部脚本文件。因为外部脚本文件具有更高的重要性，它们将与页面一起加载。因此，如果您希望 JS 在 HTML、CSS 和图像完全加载后启动，请将代码更改为内部 JS 并使用以下方法之一：

window.onload = function ...

这允许您在窗口完全加载后调用函数。

window.addEventListener("load", function(){
// ....
});

此事件侦听器允许您在页面完全加载和解析后调用 JS 函数。尝试其中一种

【讨论】：

【解决方案3】：

使用 jQuery，我们可以在特定的时间间隔（比如 3000 毫秒）后附加这样的新脚本标签。

<script type="text/javascript">
 jQuery( document ).ready(function() {
    setTimeout(function(){ 
      var my_awesome_script = document.createElement('script');    
      my_awesome_script.setAttribute('src','http://example.com/site.js');    
      document.head.appendChild(my_awesome_script);
      
    }, 3000);
});
</script>

【讨论】：

如何使用它来加载多个脚本？
jQuery.each() 或数组 "forEach" 或 "for" 循环都可用于循环遍历所有脚本，循环内部执行上述逻辑。