参考:https://www.jianshu.com/p/bf8b5bf5fc90

javaScript脚本对现代网站来说是必不可少的。当用户访问站点,需要下载各种资源,例如js脚本,CSS,图片,iframe等。

浏览器下载除js外的资源时,会 并行下载,以提高性能。但下载js脚本时,会禁止并行下载(成为脚本阻塞)。浏览器遇到JS时,必须等JS下载,解析,执行完毕后,才能继续并行下载下一个资源。原因时JS可能会改变页面或者改变JS间的依赖关系,例如A.js中用document.write改变页面,B.js依赖A.js。因此要严格保证顺序,不能并行下载。

     因此不推荐将js放到<head>标签里,浏览器遇到<script>标签会下载,解析,执行完脚本后,才继续处理剩余的页面部分。而且浏览器在遇到<body>标签前是不会渲染页面的。

     所以通常的建议是将JS放到<body>标签底下,可以有最佳的用户体验。但对于大型网站来说,这还不够。虽然js脚本由于存在的依赖关系,需要按顺序执行,但并不需要按顺序下载。

  异步处理脚本:

   通常我们加载JS脚本会在HTML里:

<script type="text/javascript" src="A.js"></script>

   这属于静态脚本元素,浏览器执行到这里发现script元素,会按上面所说的,下载解析执行脚本,同时阻塞其他资源文件的下载。而动态脚本如下:

var script = document.createElement('script');  //创建script标签
script.type = "text/javascript";
script.src = "A.js";
document.getElementsByTagName('head')[0].appendChild(script);   //塞进页面

先用document.createElement('script')生成一个script标签,再设置它的src属性,最后将其插入到<head>中。

script标签被插入到页面的DOM树后,就会开始下载src属性指定的脚本。而且通过动态脚本元素下载脚本是异步的,不会阻塞页面的其他下载和处理过程,因此script标签插入<head>中也没问题。

当JS下载完毕后,就会立即执行。如果多个JS间有依赖关系,一下载完马上执行可能会出现error。因此通常来说你应该将有依赖关系的JS合并成一个文件,虽然合并后JS文件会变大,但由于是异步下载,你几乎不会有什么损失。

如果实在不方便将有依赖关系的文件合并。你需要自己指定先后顺序,通过监听load事件来确保一次加载脚本:

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 { //Others
        script.onload = function(){
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

//严格确保A->B->C,依次下载脚本文件
loadScript("A-delay.js", function(){
    loadScript("B-delay.js", function(){
        loadScript("C-delay.js", function(){
            console.log("All files are loaded!");
        });
    });
});

Script async

HTML5里为script标签里新增了async属性,用于异步加载脚本:

<script type="text/javascript" src="alert.js" async="async"></script>

浏览器解析到HTML里的该行script标签,发现指定为async,会异步下载解析执行脚本。

Script defer

script标签里可以设置defer,表示延迟加载脚本:

<script type="text/javascript" src="alert.js" defer="defer"></script>

浏览器解析到HTML里的该行script标签,发现指定为defer,会暂缓下载解析执行脚本。而是等到页面加载完毕后,才加载脚本(更精确地说,是载DOM树构建完成后,在window.onload触发前,加载defer的脚本)。

该方式可以跨域。缺点是虽然不像async属于HTML5的新属性,但defer仍然有旧版本浏览器不支持。

XHR Eval

通过传统的Ajax方式,用XMLHttpRequest异步获得脚本内容后,通过eval执行脚本:

function createRequest() {  
    try {  
        request = new XMLHttpRequest();  
    } catch (tryMS) {  
        try {             
            request = new ActiveXObject("Msxml2.XMLHTTP");    
        } catch (otherMS) {   
            try {  
                request = new ActiveXObject("Microsoft.XMLHTTP");  
            } catch (failed) {  
                request = null;  
            }  
        }  
    }
    return request;  
}  

var request = createRequest();    //获得一个请求对象
request.onreadystatechange = function() {
    if (request.readyState == 4) {
        if ((request.status >= 200 && request.status < 300) || request.status == 304) {
            eval(request.responseText);
        }
    }
};
request.open("GET", "alert.js", true);
request.send(null);