script的async屬性以非阻塞的模式載入腳本_javascript技巧

1.HTML5實作了script的async屬性，這個新的屬性可以讓js在瀏覽器中以非阻塞的模式加載，另外script還有一個defer屬性，這個屬性目前所有瀏覽器都已實作（除了firefox和chrome的早期版本），IE這方面做得好，從一開始就支援些屬性。

複製程式碼 程式碼如下:

//async


//defer

2.async和defer的區別：
帶有async或defer的script都會立刻下載並不阻塞頁面解析,而且都提供一個可選的onload事件處理, 在script下載完成後調用,用於做一些和此script相關的初始化工作。它的不同之處在於async一旦下載完成就立即執行（在window.onload事件之前），不確保執行的順序，而defer能確保js是在按照其在頁面中的順序執行（在DOMContentLoaded事件之前）。
3.為了解決瀏覽器兼容問題可以使用下面的代碼進行處理

複製代碼程式碼如下:

function lazyload() {
var elem = document.createElement("script");
elem.type = "text/javascript";
elem. async = true;
elem.src = "js/dquery.js?v=11"; //對應的JS檔案
document.body.appendChild(elem);
}

if (window.addEventListener) {
window.addEventListener("load", lazyload, false);
} else if (window.attachEvent) {
window.attach("onload", lazyload);
} else {
window.onload = lazyload;}

由於是異步載入所以使用對應js內容就需要在window.onload事件中使用，直接寫在頁面中會報腳本錯誤，如：