本篇文章帶給大家的內容是關於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中文網其他相關文章！
