異步加載javascript腳本的幾種方式(async)
廣告：
如果在head或者body的前面放入過(guò)多的script標(biāo)簽，并且內(nèi)容很多的時(shí)候，會(huì)造成頁(yè)面在解析完所有script標(biāo)簽的內(nèi)容前有短暫的時(shí)間整個(gè)頁(yè)面空白，給用戶的體驗(yàn)會(huì)很差。但是如果所有的腳本都放在底部，又會(huì)造成dom加載完畢后有一段時(shí)間頁(yè)面雖然能看到，但是和用戶的交互卻很差，因此需要讓一些腳本與頁(yè)面異步加載。
1.在html5中，script新增了async的屬性，script添加了該屬性之后，下載腳本時(shí)將可以與頁(yè)面其他內(nèi)容并行下載，但是該屬性必須在ie9以上的瀏覽器中才可以使用，并且只能用于加載外部js腳本。
<script async src="siteScript.js" onload="myInit()"></script>
onload 在microsft edge和ihphone手機(jī)瀏覽器不支持，myinit事件最好寫(xiě)在 siteScripts.js里面。不然會(huì)導(dǎo)致不同步出錯(cuò)。
正確：<script async src="siteScript.js" ></script>
2.同樣，在html4中也有一個(gè)defer屬性，該屬性的兼容性更好一點(diǎn)，但是與async一樣，可以讓js腳本實(shí)現(xiàn)異步加載，同樣只能用于加載外部js腳本。
顯示的順序?yàn)椋簄ormal defer window.onload
3.利用XHR異步加載js內(nèi)容并執(zhí)行，代碼如下
<script>
var xhr = new XMLHttpRequest();
xhr.open("get", "js/defer.js",true)
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
eval(xhr.responseText);
}
}
</script>
4.動(dòng)態(tài)創(chuàng)建script標(biāo)簽，主要代碼如下
var script = document.createElement("script");
script.src = "js/test.js";
document.head.appendChild(script);
5.iframe方式，利用iframe加載一個(gè)同源的子頁(yè)面，讓子頁(yè)面內(nèi)的js影響當(dāng)前父頁(yè)面的一種方式。
html5代碼標(biāo)準(zhǔn)檢驗(yàn)
http://validator.w3.org/
http://html5test.com/
說(shuō)明：
1. js文件放在html頁(yè)面底部，則不影響頁(yè)面顯示和圖片下載，但是js事件要等到底部js下載完才會(huì)加載。
2. js文件放在head之間，則影響頁(yè)面顯示和圖片顯示，打開(kāi)空白，要等js下載完才會(huì)加載文字和圖片。
廣告：
