js的异步加载和时间线

JS时间线

1、创建document对象，开始解析页面。创建HTMLHtmlElement对象，添加到document中。此时，document.readyState = ‘loading’，准备进入加载阶段。
2、遇到link外部css，创建线程加载，并继续解析文档。并发；

3、遇到script外部js，并设置有async、defer属性。创建线程加载，并继续解析文档。这里，实际上是通过 document.createElement(‘script’) 方式动态插入script元素，来模拟async属性（异步），实现了脚本异步加载和执行。而defer属性（延迟）是指创建线程加载，等到DOM结构加载完成后才会执行。

4、遇到script外部js，并且设置有async、defter，浏览器创建线程加载，并继续解析文档；
　　defer属性设置后，表示加载script外部js和解析html页面是异步，并且等到html解析完成再执行js解析后的代码；
　　async属性设置后，表示加载script外部js和解析html页面是异步，但是当js解析完成，立刻执行它，此时html解析是被阻塞的；
document.createElement(‘script’)的方式动态插入script元素来模拟async属性，实现脚本异步加载和执行；
5.遇到img标签等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档

6.当文档解析完成，document.readyState = “interactive”；

7.文档解析完成后，所有设置有defer的脚本会按照顺序执行。

8…当文档解析完成之后，document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段

9.当所有saync的脚本加载完成并执行后，img等加载完成后，document.readyState = “complete” window对象触发load事件

10.从此，页面以异步响应方式处理用户输入，网络事件等。

JS使用异步加载的原因：

一般写法将js放在head中，而且默认方式是同步加载，这就会导致在进行js加载的过程中，无法在其加载完成前对后续的内容进行操作，造成页面内阻塞，对用户体验很不友好。

异步加载的三种方式:

1.defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用。
2.async 异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script 标签里。
    1.2 执行时也不阻塞页面                 当想同时兼容IE和其它浏览器该怎么写？
w3c方法：
　　<script src="demo.js" aysnc="aysnc"></script> // w3c标准方法，能在标签里写代码
IE方法：
　　<script src="demo.js" defer="defer"></script> //异步加载 只能ie能用，不能在标签里写代码

//封装异步加载
  function loadScript(url,callback){
            var script = document.createElement("script"); //创建script
            
            if(script.readyState){ //兼容IE浏览器
                script.onreadystatechange = function(){
                    if(script.readState == "complete" || script.readState == "loaded"){
                        callback()
                    }
                }
            }else{
                script.onload = function(){  
                    callback()
                }
            }
            script.src = url; 　
            document.head.appendChild(script)
        }