HTML页面中JS的加载原理：在加载HTML页面的时候，当浏览器遇到内嵌的JS代码时会停止处理页面，先执行JS代码，然后再继续解析和渲染页面。同样的情况也发生在外链的JS文件中，浏览器必须先花时间下载外链文件中的代码，然后解析并执行它，在这个过程中，页面的渲染和用户互交完全被阻塞。由于现代浏览器都允许并行下载JS文件，因此<script>标签在下载外部资源时不会阻塞其他的<script>标签。遗憾的是JS下载过程仍然会阻塞其他资源的下载。
加载JS代码优化：
(1)由于脚本阻塞页面其他资源的下载，因此推荐将所有<script>标签尽可能放到<body>标签底部，以尽量减少对整个页面下载的影响。
(2)减少页面包含的<script>标签数量有助于减少HTTP请求数量，下载单个100KB的JS文件比下载5个20KB的JS文件更快。
(3)通过无阻塞的方法来加载JS脚本。
无阻塞加载JS脚本：
(1)当动态创建script标签加载时，内嵌到标签内的代码通常立即执行(除了Firefox和Opera，它们将等待此前的所有动态脚本节点执行完毕)。
案例：动态加载JS文件(兼容IE和其他浏览器)。
function loadScript(url, callback){
var script = document.createElement ("script")
script.type = "text/javascript";
if (script.readyState){ //IE浏览器
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //其它浏览器
script.onload = function(){ callback() };
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
//按顺序动态加载多个JS脚本
loadScript("script1.js", function(){
loadScript("script2.js", function(){ alert("All files are loaded!") });
});
(2)创建一个XHR(XMLHttpRequest)对象用于下载JS文件，接着创建一个script标签将JS代码注入这个标签内。该方法优点是，你可以下载不立即执行的JS代码，由于代码返回在<script>标签之外，所有下载后不会自动执行，而且所有现代浏览器中都不会引发异常。限制是JS文件必须与页面放置在同一个域内，不能从CDN【CDN指“内容投递网络”】下载。
案例：通过XHR对象加载JS脚本
//url必须是js文件路径
function getJS(url){
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.send(null);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if (xhr.status == 200){
var script = document.createElement ("script");
script.type = "text/javascript";
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
};
}
getJS('scripts/my.js');