js之异步加载

一、时间线

正式开始之前首先要明白时间线是怎么运作的。在此之前我看来了别人的时间线的描述，现在加上自己的理解，总结的时间线大致分为以下几个步骤：

1. 创建document对象，开始解析文档，这个阶段document.readyState变为loading状态；
2. 解析文档。遇到link外部css、script外部js等会创建其他线程进行加载，文档会继续进行解析，当文档解析完成（也就是DOM树绘制完成，但是外部资源可能还没有下载完成），document.readyState变为interactive状态,并且触发DOMContentLoaded事件；
3. 外部资源全部下载完成，状态document.readyState变为complete(loaded)。

二、异步加载

异步加载js主要有以下几个方案：

1. async：只能加载外部脚本，加载完就执行，不能把js代码写在script标签里；

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

2. defer：只能IE使用，文档解析完成以后才会去执行；

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

3. 按需加载：也就是动态创建script，加载完毕后通过callback回调。

<script>
  function loadScript(url,callback){
  			//创建script
            var script = document.createElement("script");
            //处理兼容性
            if(script.readyState){
            //IE等低版本
                script.onreadystatechange = function(){
                    if(script.readyState == "complete" || script.readyState == "loaded"){
                        callback();
                    }
                }
            }else{
            //其他版本
                script.onload = function(){  
                    callback();
                }
            }
            script.src = url;
            document.head.appendChild(script);
        }
//调用
loadScript("xxx.js",function(){
             test()
         })
</script>