js 同步加载，异步加载和加载时间线

同步加载

常默认的是同步加载

<script src="http://yourdomain.com/script.js"></script>

同步模式又称阻塞模式，会阻止浏览器的后续操作，相当于阻止了后续的文件的解析，执行等。
加载到js文件会等候js文件加载完成， html css加载线被阻断
浏览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作 重定向，输出document等默认行为，所以同步才是最好的。可以有效防止重绘。通常加载js文件或者放

异步加载（不影响html和css的加载 ）

异步加载又称非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式

1. defer IE专用（IE9以下）

当浏览器解析到script脚本，有defer时 浏览器创建线程加载 并继续解析文档。

<script defer="defer" src="main1.js"></script>

代码执行时间：当整个网页解析完，执行代码（在网页而加载完之前）
这就是defer的作用了

2. async W3C的标准

当浏览器解析到script脚本，有async 时 浏览器创建线程加载 并继续解析文档。加载完就执行，只能加载外部脚本
这个是 ES7 中的特性，async顾名思义是“异步”的意思，async用于声明一个函数是异步的

<script defer="async  " src="main1.js"></script>

async和defer的相同点和不点

相同点：异步加载文件
不同点：
async：虽然是异步加载，但当有多个脚本异步加载的时候，不一定先加载哪一个，加载顺序不一定
defer：加载顺序由第一个延迟脚本到最后一个延迟脚本

3 .创建一个script标签，插入到DOM中，加载完毕后callback 兼容性最好的

	function loadscript(url,callback) {
        var script=document.createElement('script');
        script.type="text/javascript";
     
        if (script.readyState){
        //ie的 script 元素支持onreadystatechange事件
            script.onreadystatechange=function () {
            	//判断是否加载完成
                if (script.readyState=="compolete"||script.readyState=="loaded"){
                    callback();
                }
            }
        }else{
                 // 什么时候load.js加载完成了？  提示  onload
                script.onload = function(){//加载完成的标志
                    // safari  chrome ff opr
                    obj[callback]();
                }
            }
            script.src=url;
        document.head.appendChild(script);
  }

js加载时间线

1.创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段 document.readyState = ‘loading’ 。loading （加载）
2.遇到link外部css，创建线程加载，并继续解析文档。
3.遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞html，css，等待js加载完成并执行该脚本，然后继续解析文档（ html css）。
4.遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。 对于async属性的脚本，脚本加载完成后立即执行。（禁止使用document.write() 因为有可能会清空DOM树）
5.遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。此时DOM树上有img标签但是没有加载src
6.当文档解析完成，document.readyState = ‘interactive’ 。 interactive （交互的）
7.文档解析完成后，所有设置有defer的脚本会按照顺序执行。（禁止使用document.write()）;
8.document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段（浏览器正常发挥功能）。
9.当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = ‘complete’，（complete 完成）window对象触发load事件。
10.从此，以异步响应方式处理用户输入、网络事件等。