JS異步加載的三種方式

　　js加載的缺點：加載工具方法沒必要阻塞文檔，過多js加載會影響頁面效率，一旦網速不好，那么整個網站將等待js加載而不進行后續渲染等工作。 有些工具方法需要按需加載，用到再加載，不用不加載，。

　　默認正常模式下下，JS是同步加載的，即優先加載JS，只有當JS文件下載完，dom和css才開始加載，當某些時候我們需要JS異步加載，我們可以通過以下方式來設置異步加載,不同情況下選取不同方式即可

1.defer:defer
　　JS異步下載，dom結構解析完（標簽 + 樣式（內容不一定下載完））才執行 （執行會阻塞dom渲染）
　　僅IE能用
　　內部JS也能用該屬性
　　異步加載js不允許使用document.write，因為document.write會清除文檔流，js標簽還未加載就會被清除
　　document.write()可用於初始化頁面
2.(h5)async:async（asynchronous） ajax(asynchronous javascript and XML)
　　JS異步加載，加載完畢后立刻執行（執行阻塞dom渲染）
　　IE8及以下不兼容
　　內部JS不能用該屬性

3.除了以上兩種方法，還有一種兼容自己封裝的異步加載方式，即動態添加script標簽也能實現異步加載。

　　

function asyncLoaded(url,callBack){/*url為js的鏈接，callBack為url的js中的函數（該函數調用應該寫到匿名函數中，如function(){console.log(div.getScrollOffset())}）*/
    var script = document.createElement('script');
    script.type = 'text/javascript';
    /*if else 這幾句話必須要寫到這位置處，不能放最后，因為if中js加載中script.readyState存在好幾種狀態，
    只有狀態改變‘readystatechange’事件才會觸發，但現在瀏覽器加載速度很快，當解析到該事件時JS有可能已經加載完，
    所以事件根本不會觸發，所以要寫到前面*/
    if(script.readystate){//兼容IE
        script.onreadystatechange = function() {//狀態改變事件才觸發
            if(script.readyState == 'loaded' || script.readyState == 'complete'){    
                callBack();
                script.onreadystatechange = null;        
            }
        }
    }else{
        script.onload = function(e){
            callBack();
        }
    }        
    script.src = url;
    document.body.appendChild(script);
}