js非同步載入

標籤：

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

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

如果您的指令碼不會改變文檔的內容，可將 defer 屬性加入到 <script> 標籤中，以便加快處理文檔的速度。因為瀏覽器知道它將能夠安全地讀取文檔的剩餘部分而不用執行指令碼，它將延遲對指令碼的解釋，直到文檔已經顯示給使用者為止。 

<script type="text/javascript" defer="defer"> alert(document.getElementById("p1").firstChild.nodeValue); </script> 

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

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

注釋：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 script.onload = function(){ callback(); }; } script.src = url; document.body.appendChild(script); } 

 

js非同步載入