快捷導(dǎo)航

JavaScript script標(biāo)簽同步異步加載實(shí)現(xiàn)方式

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

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

同步加載

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

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

異步加載

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

defer

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

async

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

Script DOM Element

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

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

<script>

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

補(bǔ)充：document三個(gè)狀態(tài)

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