異步加載js的方法

這篇文章主要介紹了異步加載js的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),都蘭企業(yè)網(wǎng)站建設(shè),都蘭品牌網(wǎng)站建設(shè),網(wǎng)站定制,都蘭網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,都蘭網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

js加載時間線：

它是根據(jù)js出生的那一刻開始記錄的一系列瀏覽器按照順序做的事，形容的就是加載順序，可以用來優(yōu)化什么東西，理論基礎(chǔ)，背下來.

1、創(chuàng)建Document對象，開始解析web頁面。解析HTML元素和他們的文本內(nèi)容后添加Element對象和Text節(jié)點到文檔中。這個階段document.readyState = 'loading'。（生成document對象，document狀態(tài)位變?yōu)閘oading）

2、遇到link外部css，創(chuàng)建線程加載，并繼續(xù)解析文檔。

3、遇到script外部js，并且沒有設(shè)置async、defer，瀏覽器加載，并阻塞，等待js加載完成并執(zhí)行該腳本，然后繼續(xù)解析文檔。

4、遇到script外部js，并且設(shè)置有async、defer，瀏覽器創(chuàng)建線程加載，并繼續(xù)解析文檔。對于async屬性的腳本，腳本加載完成后立即執(zhí)行。（異步禁止使用document.write()）

document.write()：特別特殊他是把里面的東西當(dāng)成HTML文檔輸出到頁面里去，但是有一點就是，有的時候，當(dāng)你整個文檔全部都解析的差不多的時候再用document.write()的話會把你之前所有的文檔流都清空，用它里面的文檔流代替

例：整個頁面只顯示a，這里的document.write();在這里有消除文檔流的功能，連script都消除了。

<p style="height:100px;width:100px;background-color:red;"></p>

<script type="text/javascript">
    window.onload = function(){
        document.write('a');
    }
</script>

5、遇到img等，先正常解析dom結(jié)構(gòu)，然后瀏覽器異步加載src，并繼續(xù)解析文檔。

6、當(dāng)文檔解析完成，document.readyState = 'interactive'。

先解析完，再加載完，然后狀態(tài)位變?yōu)閕nteractive（活躍）

查看狀態(tài)位的轉(zhuǎn)換：

console.log(document.readyState);
document.onreadystatechange = function(){
     console.log(document.readyState);
}

7、文檔解析完成后，所有設(shè)置有defer的腳本會按照順序執(zhí)行。（注意與async的不同,但同樣禁止使用(document.write()）;

8、document對象觸發(fā)DOMContentLoaded事件，這也標志著程序執(zhí)行從同步腳本執(zhí)行階段，轉(zhuǎn)化為事件驅(qū)動階段。

例1：同時打印出a和complete,而且onDOMContentLoaded是不好使的，只有綁定在addEventListener才好用。

console.log(document.readyState);
document.onreadystatechange = function(){
     console.log(document.readyState);
}
document.addEventListener('DOMContentLoaded',function(){
      console.log('a');
},false)

例2：window.onload和下面這個的區(qū)別

$(document).ready(function(){
    //當(dāng)DOM解析完就執(zhí)行的部分（不用加載完，加載完是給用戶看的，對于我們來說解析完就可以操作了）
    /*它的原理就是interactive和DOMContentLoaded事件*/
})

區(qū)別就是：window.onload滿需要都加載完，但是它解析完就可以操作了（這是jQuery的方法）

例3：當(dāng)把script放在上面時候最好這樣寫，不要寫onload，千萬不要寫onload，但是最好的方法還是寫在下面

<head>
    <meta charset="UTF-8">
    <title>lottery</title>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded',function(){
            var p = document.getElementsByTagName('p')[0];
            console.log(p);
        },false)
    </script>
    script標簽寫在上面又能處理下面的代碼，而且效率還高，因為登高DOM解析完就執(zhí)行，而不是DOM加載完
</head>
//script標簽寫在上面又能處理下面的代碼，而且效率還高，因為登高DOM解析完就執(zhí)行，而不是DOM加載完

9、當(dāng)所有async的腳本加載完成并執(zhí)行后、img等加載完成后，document.readyState = 'complete'，window對象觸發(fā)load事件。

10、從此，以異步響應(yīng)方式處理用戶輸入、網(wǎng)絡(luò)事件等。
總結(jié)就是三個點：先生成document對象，代表js可以運行了，第二步就是文檔解析完了，第三步就是文檔加載完了并且執(zhí)行完了

下面我們看看異步加載js的三種方式:

異步加載js的方法:

1)、async HTML5的屬性,讓JavaScript代碼進行異步加載

<script type="text/javascript" src="05.js" async="async"></script>

2)defer 老版本IE專用

<script type="text/javascript" defer="defer"></script>

3)動態(tài)的創(chuàng)建script的標簽(可以解決兼容h6以及低版本ie的問題),代碼如下:

<script type="text/javascript">
            function asyncLoaded(url,callback){
                var script = document.createElement("script");
//                script.src = url;   假如說網(wǎng)速非常好，直接執(zhí)行完成了，后面就監(jiān)聽不到狀態(tài)的改變了
                if(script.readyState){
                    script.onreadystatechange = function(){
                        if(script.readyState == "complete" || script.readyState =="loaded"){
//                            執(zhí)行某個函數(shù)
                            callback()
                        }
                    }
                }else{
                    script.onload = function(){
//                        執(zhí)行某個函數(shù)
                        callback()
                    }
                }
                script.src = url;    //異步的過程
                document.head.appendChild(script)    
            }
            asyncLoaded("05.js",function(){
                fn()　　　　　　　　　　//05.js中的函數(shù)
            })
        </script>

感謝你能夠認真閱讀完這篇文章，希望小編分享異步加載js的方法內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細的解決方法等著你來學(xué)習(xí)!

當(dāng)前題目：異步加載js的方法
標題來源：http://www.yijiale78.com/article28/gsojjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、軟件開發(fā)、網(wǎng)站策劃、網(wǎng)站收錄、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

異步加載js的方法