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

Question

In my site I have many javascript files, for example:

<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>

these are slowing my website's load time. so my idea is to load these script files 2 sec after the page fully loads, I am already using defer but I want to load these (script files) in more delay in order to load my pages faster.

Answer 1

using jQuery we can append new script tags like this after particular interval of time say 3000 ms.

<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>

Answer 2

The best option here is to use internal js, instead of external script files. Because external script files have higher importance and they will be loaded along with the page. So, if you want the JS to start after the HTML, CSS and Images have completely loaded, change the code into internal JS and use one of these methods:

window.onload = function ...

This allows you to call a function once the window has been completely loaded.

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

This event listener allows you to call a JS function once the page is completely loaded and parsed. Try one of these

Answer 3

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) );
}