js異步載入的三種解決方案_javascript技巧

預設情況javascript是同步載入的，也就是javascript的載入時阻塞的，後面的元素要等待javascript載入完畢後才能進行再加載，對於某些意義不是很大的javascript，如果放在頁頭會導致載入很慢的話，是會嚴重影響使用者體驗的。

(1) defer，只支援IE
defer屬性的定義和用法（我摘自w3school網站）
defer 屬性規定是否對腳本執行進行延遲，直到頁面加載為止。
有的 javascript 腳本 document.write 方法來建立目前的文件內容，其他腳本就不一定是了。

如果您的腳本不會改變文件的內容，可將 defer 屬性加入到 <script> 標籤中，以便加快處理文件的速度。因為瀏覽器知道它將能夠安全地讀取文件的剩餘部分而不用執行腳本，它將推遲對腳本的解釋，直到文件已經顯示給使用者為止。 <BR>範例：<BR><div class="codetitle"><span><a style="CURSOR: pointer" data="71033" class="copybut" id="copybut71033" onclick="doCopy('code71033')"><U>複製程式碼 程式碼如下:<div class="codebody" id="code71033"> <BR><script type="text/script type="text/ javascript" defer="defer"> <BR>alert(document.getElementById("p1").firstChild.nodeValue); <BR></script>

(2) async ：
async的定義和用法(是HTML5的屬性)
async 屬性規定一旦腳本可用，則會非同步執行。
範例：

複製程式碼 程式碼如下:

註解：async 屬性僅適用於外部腳本（只有在使用src 屬性時）。
註解：有多種執行外部腳本的方法：
•如果async="async"：腳本相對於頁面的其餘部分異步地執行（當頁面繼續進行解析時，腳本將被執行）
•如果不使用async 且defer="defer"：腳本將在頁面完成解析時執行
•如果既不使用async 也不使用defer：在瀏覽器繼續解析頁面之前，立即讀取並執行腳本

(3) 建立script，插入到DOM中，載入後callBack，見程式碼：

複製程式碼

複製程式碼

程式碼如下:


function loadScript(url, callback){
var script = document.createElement_x("script")
script.type = "text/ javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
} else { //Others: Firefox, Safari, Chrome, and Opera
} else { //Others: Firefox, Safari, Chrome, and Opera
} else { //Others: Firefox, Safari, Chrome, and Opera
} else { //Others: Firefox, Safari, Chrome, and Opera

} 是>script.onload = function(){ callback(); }; } script.src = url; document.body.appendChild(script); };