javascript如何解決非同步載入實作方式總結

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

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

如果您的腳本不會改變文件的內容，可將 defer 屬性加入到 3f1c4e4b6b16bbbd69b2ee476dc4f83a 標籤中，以便加快處理文件的速度。因為瀏覽器知道它將能夠安全地讀取文件的剩餘部分而不用執行腳本，它將推遲對腳本的解釋，直到文件已經顯示給使用者為止。 
範例： 

<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); 
}

以上是javascript如何解決非同步載入實作方式總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！