js檔案的非同步載入的方法總結（附程式碼）

本篇文章帶給大家的內容是關於js檔案的非同步載入的方法總結（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

為什麼要非同步載入：同步載入會阻塞瀏覽器的後續處理，即只有當下檔案載入完畢之後才能進行下一步的檔案載入（如圖片）、渲染、程式碼執行。如果js中有輸出document內容、修改DOM、重定向等行為，就會造成頁面阻塞。

什麼叫非同步載入： 非同步載入不會阻塞瀏覽器的後續操作，也就是在載入執行js的同時，並行載入其他檔案渲染頁面。

方法一：async屬性
async屬性規定js檔案一旦可用就會執行，腳本相對於頁面的其餘部分異步地執行（當頁面繼續進行解析時，腳本將被執行）

async 屬性僅適用於外部腳本（只有在使用src 屬性時）。

async 屬性不能保證執行順序。

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

方法二：defer屬性
defer 屬性規定是否對腳本執行進行延遲，直到頁面載入為止。

defer屬性表示腳本不會改變文件的內容，瀏覽器知道它將能夠安全地讀取文件的剩餘部分而不用執行腳本，它將推遲對腳本的解釋，直到文件已經顯示給用戶為止。以便加快處理文件的速度。

只有 Internet Explorer 支援 defer 屬性。

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

方法三：動態建立DOM
不要求js同源

這些程式碼應被放置在標籤前(接近HTML檔案底部)

這種載入方式在載入執行完之前會阻止onload 事件的觸發，而現在很多頁面的程式碼都在onload 時還要執行額外的渲染工作等，所以還是會阻塞部分頁面的初始化處理。

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }     
</script>

方法四：onload時動態建立DOM
不要求js同源

這些程式碼應被放置在標籤前(接近HTML檔案底部)

這種載入方式不是立即開始非同步載入js ，而是在onload 時才開始非同步載入。這樣就解決了阻塞 onload 事件觸發的問題。

<script type="text/javascript">    
function downloadJSAtOnload() {        
var element = document.createElement("script");
        element.src = "defer.js";        
        document.body.appendChild(element);
    }    
    if (window.addEventListener)        
    window.addEventListener("load", downloadJSAtOnload, false);    
    else if (window.attachEvent)        
    window.attachEvent("onload", downloadJSAtOnload);    
    else window.onload = downloadJSAtOnload;
</script>

相關建議：

  

#

以上是js檔案的非同步載入的方法總結（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！