JS异步加载的三种方法

JavaScript默认是同步加载（又称阻塞模式），这种模式在加载js文件时，会影响后续页面的渲染，一旦网速不好，整个页面将会等待js文件的加载，从而不进行后续页面的渲染，这也是提倡将

添加defer属性后，js脚本在所有元素加载完成后执行，而且是按照js脚本声明的顺序执行

2.async —— h5新属性

async属性规定一旦脚本可用，则会异步执行

async的用法和defer一样，但async只适用于外部引用的脚本，即script有src属性时才可使用

不同的是，添加async属性后，js脚本是乱序执行的，不管你声明的顺序如何，只要某个js脚本加载完就立即执行

3.动态生成script标签

在js里创建script标签，插入DOM中，加载完成后callback

function loadScript(url, callback){
    var s = document.createElement('script');
    s.type = 'text/javascript';
    if(s.readyState){
        s.onreadystatechange = function(){  //兼容IE
            if(s.readyState == 'complete' || s.readyState == 'loaded'){
                callback();
            }
        }
    }else{
        s.onload = function(){  //safari chrome opera firefox
            callback();
        }
    }

    s.src = url;
    document.head.appendChild(s);
}

这样所有的js脚本都会在onload事件后才加载，onload事件会在所有文件内容（包括文本、图片、CSS文件等）加载完成后才开始执行，极大的优化了网页的加载速度，提高了用户体验