首頁 >web前端 >js教程 >如何異步加載js？異步載入js的方法介紹

如何異步加載js？異步載入js的方法介紹

青灯夜游轉載: 2019-01-05 10:33:363068瀏覽

如何非同步載入js？這篇文章就跟大家介紹三種非同步載入js的方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。【影片教學推薦：JavaScript影片教學】

js載入時間軸 ：

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

1、創建Document對象，開始解析web頁面。解析HTML元素和他們的文字內容後加入Element物件和Text節點到文件中。這個階段document.readyState = 'loading'。（產生document對象，document狀態位元變成loading）

2、遇到link外部css，建立執行緒加載，並繼續解析文件。

3、遇到script外部js，並且沒有設定async、defer，瀏覽器加載，並且阻塞，等待js加載完成並執行該腳本，然後繼續解析文件。

4、遇到script外部js，並且設定有async、defer，瀏覽器建立執行緒加載，並繼續解析文件。對於async屬性的腳本，腳本載入完成後立即執行。（非同步禁止使用document.write()）

document.write()：特別特殊他是把裡面的東西當成HTML文檔輸出到頁面裡去，但是有一點就是，有的時候，當你整個文件全部都解析的差不多的時候再用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(&#39;a&#39;);
    }
</script>

5、遇到img等，先正常解析dom結構，然後瀏覽器非同步載入src，並繼續解析文件。

6、當文件解析完成，document.readyState = 'interactive'。

先解析完，再載入完，然後狀態位元變成interactive（活躍）

檢視狀態位的轉換：

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

7、文件解析完成後，所有設定有defer的腳本都會依照順序執行。（注意與async的不同,但同樣禁止使用(document.write()）;

8、document物件觸發DOMContentLoaded事件，這也標誌著程式執行從同步腳本執行階段，轉換為事件驅動階段。

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

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

例2： window.onload和下面這個的差別

$(document).ready(function(){
    //当DOM解析完就执行的部分（不用加载完，加载完是给用户看的，对于我们来说解析完就可以操作了）
    /*它的原理就是interactive和DOMContentLoaded事件*/
})

差別就是：window.onload滿需要都載入完，但是它解析完就可以操作了（這是jQuery的方法）

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

<head>
    <meta charset="UTF-8">
    <title>lottery</title>
    <script type="text/javascript">
        document.addEventListener(&#39;DOMContentLoaded&#39;,function(){
            var p = document.getElementsByTagName(&#39;p&#39;)[0];
            console.log(p);
        },false)
    </script>
    script标签写在上面又能处理下面的代码，而且效率还高，因为登高DOM解析完就执行，而不是DOM加载完
</head>
//script标签写在上面又能处理下面的代码，而且效率还高，因为登高DOM解析完就执行，而不是DOM加载完

#9、當所有async的腳本載入完成並執行後、img等載入完成後，document.readyState = 'complete'，window物件觸發load事件。

10、從此，以非同步回應方式處理使用者輸入、網路事件等。總結就是三個點：先生成document對象，代表js可以運行了，第二步就是文檔解析完了，第三步就是文檔加載完了並且執行完了

下面我們來看看非同步載入js的三種方式:

#非同步載入js的方法:

1)、async HTML5的屬性,讓JavaScript程式碼進行非同步載入

36fa79bca5f3317b9acb41ac36f86b382cacc6d41bbb37262a98f745aa00fbf0

2)defer 舊版IE專用

76cd4913e6ee9a69d0dba4fc797cdc002cacc6d41bbb37262a98f745aa00fbf0

3)動態的建立script的標籤(可以解決相容h5以及低版ie的問題),程式碼如下:

8019067d09615e43c7904885b5246f0a
            function asyncLoaded(url,callback){
                var script = document.createElement("script");
//                script.src = url;   假如说网速非常好，直接执行完成了，后面就监听不到状态的改变了
                if(script.readyState){
                    script.onreadystatechange = function(){
                        if(script.readyState == "complete" || script.readyState =="loaded"){
//                            执行某个函数
                            callback()
                        }
                    }
                }else{
                    script.onload = function(){
//                        执行某个函数
                        callback()
                    }
                }
                script.src = url;    //异步的过程
                document.head.appendChild(script)    
            }
            asyncLoaded("05.js",function(){
                fn()　　　　　　　　　　//05.js中的函数
            })
        2cacc6d41bbb37262a98f745aa00fbf0

以上就是本篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位！！！

以上是如何異步加載js？異步載入js的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php JavaScript html5 jquery css html 线程 JS 对象事件 dom 异步

陳述：

本文轉載於：cnblogs.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：jsonp如何進行跨域獲取資料？（程式碼範例）下一篇：jsonp如何進行跨域獲取資料？（程式碼範例）

看更多