JavaScript script標簽同步異步加載實現(xiàn)方式

更新時間：2013年09月13日 17:16:35 作者：小榮的網(wǎng)絡開發(fā)日志

文章介紹了同步加載和異步加載兩種模式的區(qū)別,詳細解釋了異步加載的三種方式,并給出了一種封裝函數(shù)兼容性的異步加載js文件的方法

同步加載

同步模式，又稱阻塞模式，會阻止瀏覽器的后續(xù)處理，停止后續(xù)的解析，只有當當前加載完成，才能進行下一步操作。

<script src="http://xxx/script.js"></script>
<!--所以一般建議把<script>標簽放在<body>結尾處，這樣盡可能減少頁面阻塞。-->

異步加載

異步加載又叫非阻塞加載，瀏覽器在下載執(zhí)行js的同時，還會繼續(xù)進行后續(xù)頁面的處理。主要有三種方式。

defer

<script src="http://xxx/script.js" defer></script>
 <!--要等dom文檔全部解析完（dom樹生成）才會被執(zhí)行。-->

async

<script src="http://xxx/script.js" defer></script>
 <!--加載完就執(zhí)行;async只能加載外部腳本，不能寫js到標簽里。-->

Script DOM Element

這種方法是在頁面中<script>標簽內，用 js 創(chuàng)建一個 script 元素并插入到 document 中。

以下是封裝函數(shù)兼容性的異步加載js文件，并且可以按需執(zhí)行該文件里面的函數(shù)（按需加載）

<script>

        function loadScript(url,callback){
            //url是按需加載的js文件
            //callback是按需加載的js文件中某個函數(shù)
            // 1. 創(chuàng)建一個script標簽
            var script = document.createElement('script');    
            // 處理ie的兼容
            if(script.readyState){
                script.onreadystatechange = function(){
                    // 如果script已經(jīng)下載完成
                    if(script.readyState == 'complete' || script.readyState == 'loaded'){
                        callback();
                    }
                }
            }else{
                // 監(jiān)聽script的下載的狀態(tài) 當狀態(tài)變?yōu)橄螺d完成后 再執(zhí)行callback
                script.onload = function(){
                    callback();
                }
            }
            //在后面引入的目的是如果在IE上如果下載太快（比讀程序還快）
            //IE的readystatechange 事件檢測狀態(tài)碼的時候，它早已經(jīng)從loading變成complete或者loaded（以極快的速度加載完了文件，你還沒來得及檢測）
            // 那你再檢測它就不會變了，它一直都是complete或者loaded
            //這個時候就是馬后炮了，檢測也沒用了。
            // 2. 給script標簽添加src 引入一個js文件
            script.src = url;
            // 3. 追加到body
            document.body.appendChild(script);
        }
    </script>

補充：document三個狀態(tài)

document.readyState === "loading" //表示document仍在加載
document.readyState === "interactive"http://文檔已經(jīng)完成加載，文檔已被解析，但是諸如圖像，樣式表和框架之類的子資源仍在加載。
interactive //活躍狀態(tài)，dom樹繪制完成
document.readyState === "complate" T文檔和所有子資源已完成加載。狀態(tài)表示 [load]