浅谈异步加载和加载时间线

异步加载

JS在默认情况下是以同步模式（又称阻塞模式）加载的，浏览器对于代码请求的资源都是瀑布式的加载，而不是阻塞式的，但是JS的执行总是阻塞式的。

这会引起什么问题？如果在页面中加载一些JS，但其中某个请求迟迟得不到响应，位于此JS后的JS将无法执行，同时页面渲染也不能继续。

异步加载又被称为非阻塞加载，浏览器在下载JS的同时，还会进行后续页面处理。

实现异步加载的方法

1.动态生成 script 标签：这种方法可以兼容所有浏览器。

<script type="text/javascript">
            function loadScript(url, callback){
                var script = document.createElement('script');
                script.type = "text/javascript";
                if(script.readyState){
                    // 状态码 readyState-->complete loaded 表示ie中script加载完成了
                    script.onreadystatechange = function (){// ie
                        if(script.readyState == 'complete' || script.readyState == 'loaded'){
                          obj[callback]();
                        }
                    }
                }else{
                     // 什么时候load.js加载完成了？  提示  onload
                    script.onload = function(){//加载完成的标志
                        obj[callback]();
                    }
                }
                script.src = url;//下载了指定地址的js文件
                document.head.appendChild(script);//挂到DOM树上，此时才执行了js文件中的代码
            }
            loadScript('load.js', 'intr');
            loadScript('load.js', 'study');
 </script>

async属性
async是HTML5的新属性，该属性规定一旦脚本可用，则会异步执行（一旦下载完毕就会立刻执行），需要注意的是，async属性仅适用于外部脚本。

 <script async>
         var test = 20;
        console.log(test);
 </script>

defer属性
defer属性规定是否对该脚本的执行进行延迟，知道页面加载为止。IE专用（IE9以下）

<script defer>
         var test = 20;
        console.log(test);
 </script>

async和defer属性的总结：
1.如果没有async属性和defer属性，那么浏览器会立即执行当前的JS脚本，阻塞后面的脚本；
2.如果有async属性，加载和渲染后续文档的过程和当前JS的加载和执行并行进行，它是乱序执行的，不管你声明的顺序如何，只要它加载完了就会执行。
3.如果有defer属性，加载后续文档元素的过程和JS的加载时并行进行的，但是JS的执行是在所有元素解析完成之后进行的，而且它是按照加载顺序执行脚本的。
简言之：async是乱序；defer是顺序。

加载时间线

1、创建document对象，开始解析web页面。创建HTMLHtmlElement对象，添加到document中。这个阶段document.readyState = ‘loading’；

2、遇到link外部css，创建线程加载，并继续解析文档。并发；

3、遇到script外部js，并且没有设置async、defer，浏览器创建线程加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。js拥有修改dom的能力–>domcument.write；

4、遇到script外部js，并且设置有async、defter，浏览器创建线程加载，并继续解析文档；

defer属性设置后，表示加载script外部js和解析html页面是异步，并且等到html解析完成再执行js解析后的代码；

async属性设置后，表示加载script外部js和解析html页面是异步，但是当js解析完成，立刻执行它，此时html解析是被阻塞的；

document.createElement(‘script’)的方式动态插入script元素来模拟async属性，实现脚本异步加载和执行；

5、遇到img等，浏览器创建线程加载，并继续解析文档。并发；

6、当文档解析完成，document.readyState = ‘interactive’；

7、文档解析完成后，所有设置有defer的脚本会按照顺序执行（注意与async的不同）；

8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段；

9、当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = ‘complete’，window对象触发load事件；

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

总结：
JS最好放在文档下面加载，不会阻塞页面的正常解析；
工具类的JS 可以放在head里面，但要异步加载；
window.onload事件，是要等所有加载完成后才触发（如果有一张图片一直无法加载，就会一直等待）,效率最低，所以，最好是把主程序代码放到文档解析完成后开始执行：

// 监听dom解析完就执行的代码
document.addEventListener('DOMContentLoaded', function(){
		console.log('hello');
        var div = document.getElementsByTagName('div')[0];
        console.log(div);
},false)