异步加载与时间线

异步加载与同步加载

异步加载：
异步加载也叫非阻塞模式加载，浏览器在下载js的同时，同时还会执行后续的页面处理。在script标签内，用js创建一个script元素并插入document中，这种就是异步加载js文件了。
同步加载：
平常默认用的都是同步加载。如：
　　同步模式又称阻塞模式，会阻止浏览器的后续处理，停止了后续的文件的解析，执行，如图像的渲染。流览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来。
js加载的缺点
js加载本身是属于同步加载的，加载js文件会阻塞文档，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。
但是有些工具方法需要按需加载，有一些工具js文件它是不会改变页面的，用到再加载，不用不加载。
异步加载的三种方式：
01、async

这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。
02、onload时的异步加载

(function(){
    if(window.attachEvent){
        window.attachEvent("load", asyncLoad);
    }else{
        window.addEventListener("load", asyncLoad);
    }
    var asyncLoad = function(){
        var ga = document.createElement('script'); 
        ga.type = 'text/javascript'; 
        ga.async = true; 
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
        var s = document.getElementsByTagName('script')[0]; 
        s.parentNode.insertBefore(ga, s);
    }
)();

这种方法只是把插入script的方法放在一个函数里面，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件触发的问题。
注:DOMContentLoaded与load的区别。前者是在document已经解析完成，页面中的dom元素可用，但是页面中的图片，视频，音频等资源未加载完，作用同jQuery中的ready事件；后者的区别在于页面所有资源全部加载完毕。
03、defer（IE）
在 < script >元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。defer属性只适用于外部脚本文件

(function(){
    var scriptEle = document.createElement('script');
    scriptEle.type = "text/javascript"
    scriptEle.defer = true;
    scriptEle.src = "xxx.js";

    var head = document.getElementsByTagName("head")[0];
    head.insertBefore(scriptEle, head.firstChild); 
})();

defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行

解决异步加载的方法

1、利用定时器的延时

var script = document.createElement("script");
script.src = "test.js";
document.head.appendChild(script);
setTimeout("test()", 1000);

2、加载时间onload

window.onload =  function(){
    fun();
}

3、创建一个script标签，然后插入dom里面，加载完后callblack