异步加载

1.异步与同步首先要明白线程。一个进程至少有一个线程，JavaScript就是一个典型的单线程。

2.如果网页从打开开始，到关闭浏览器只服务一个用户的话，这个就是一个单线程。多线程就是多个同时使用。

3.JavaScript的一个特点就是单线程异步加载。其实也是多线程，用异步表示。

4.JavaScript的加载过程是单线程，同步的会阻塞后面的代码执行。单线程同步就必须要加载完优先加载的代码才会执行后面的代码。

5.在HTML中只有script标签中的src会阻塞代码。可以用defer属性和async属性解决（defer属性只能针对IE浏览器）。

6.异步加载的情况有：

　　6.1<link rel = "" href = "">

　　6.2<img src = "" alr = "">

　　6.3写script标签创建标签后，设置src属性 <script src= ""></script>

7.同步的过程，只有当script代码全部下载完了才会执行。

8.解决同步的过程的方法

　　8.1 设置定时器，当过去设定时间后再运行

　　　　setTimeout()  这个方法虽然有效，但是几乎不可用，因为我们没有办法判断代码执行完会用多长时间，不现实。

　　8.2  script.onload = function(){}  绑定一个下载完成事件，老版本的IE不可以使用。

　　8.3  这个办法可以兼容IE

script.onreadystatechange = function(){
   if(script.readyState == 'complete'||script.readyState  == "loaded"){
        test();
    }  
}

　9.监听事件状态变化

document.onreadystatechange = function(){
            console.log(document.readyState)
        }

10.解决同步，兼容性方法

    <script>
        function asyncScript(url,callback){
            var script = document.createElement("script");//新建一个script标签
            if(script.readyState){
                script.onreadystatechange = function(){
                    //script.readyState发生改变时触发script.onreadystatechange
                    if(script.readyState == "complete" || script.readyState == "loaded"){
                        callback()
                    }
                }
            }else{
                script.onload = function(){//script.onload-->表示加载完成以后执行
                    callback()
                }
            }
            script.src = url;    //参数传递进来       src加载url是一个异步的过程
            var head = document.getElementsByTagName("head")[0];
            head.appendChild(script);
            
        }
        
        asyncScript("test.js",function(){
            test()
        })
    </script>