页面加载后，多次加载JS文件

Question

为了加快页面加载时间，我想在加载页面内容后加载JS脚本。

我发现这是很有帮助的文章，解释如何做到这一点，当你有一个单一的JS文件：https://varvy.com/pagespeed/defer-loading-javascript.html

该解决方案是这样的：

<script type="text/javascript"> 
function downloadJSAtOnload() { 
    var element = document.createElement("script"); 
    element.src = "yourSingleJSFile.js"; 
    document.body.appendChild(element); 
} 
if (window.addEventListener) 
    window.addEventListener("load", downloadJSAtOnload, false); 
else if (window.attachEvent) 
    window.attachEvent("onload", downloadJSAtOnload); 
else window.onload = downloadJSAtOnload; 
</script> 

在我的情况，我有4点不同的js文件：以$(document).ready(...);开头并定义函数initMap（）和maps.googleapis.com的jQuery，main.js和index.js。因此，我将代码更改为

function downloadJSAtOnload() { 

var element = document.createElement("script"); 
element.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"; 
document.body.appendChild(element); 

var element = document.createElement("script"); 
element.src = "/resources/js/main.js"; 
document.body.appendChild(element); 

var element = document.createElement("script"); 
element.src = "/resources/js/index.js"; 
document.body.appendChild(element); 

var element = document.createElement("script"); 
element.src = "https://maps.googleapis.com/maps/api/js?key=***mysecetrkey**&callback=initMap"; 
document.body.appendChild(element); 

每次加载页面时，我都会在控制台中发现JS错误。有两个错误，我发现迄今：

首先

ReferenceError: $ is not defined index.js:9:5

我不明白这里发生了什么。似乎在jquery加载之前包含了index.js。但是如何在main.js中抛出错误呢？

二

validValueError: initMap is not a function

在我看来，那googleapis.com JS已加载但index.js丢失（因为我定义功能initMap（）那里）。

---

如何强制脚本在页面内容加载后按顺序加载？

Answer 1

如果脚本彼此依赖，则需要确保依赖首先加载。你可以像这样嵌套脚本加载：

var jqueryElement = document.createElement("script"); 
jqueryElement.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"; 

var mainElement = document.createElement("script"); 
mainElement.src = "/resources/js/main.js"; 

var indexElement = document.createElement("script"); 
indexElement.src = "/resources/js/index.js"; 

var googleApiElement = document.createElement("script"); 
googleApiElement.src = "https://maps.googleapis.com/maps/api/js?key=***mysecetrkey**&callback=initMap"; 

// add the first script element 
document.body.appendChild(jqueryElement); 

jqueryElementElement.onload = function() { 
    document.body.appendChild(googleApiElement); 
} 

googleApiElement.onload = function() { 
    document.body.appendChild(mainElement); 
    document.body.appendChild(indexElement) 
} 

我只是猜测你的依赖顺序。