廣告：

如果在head或者body的前面放入過多的script標簽，并且內容很多的時候，會造成頁面在解析完所有script標簽的內容前有短暫的時間整個頁面空白，給用戶的體驗會很差。但是如果所有的腳本都放在底部，又會造成dom加載完畢后有一段時間頁面雖然能看到，但是和用戶的交互卻很差，因此需要讓一些腳本與頁面異步加載。

1.在html5中，script新增了async的屬性，script添加了該屬性之后，下載腳本時將可以與頁面其他內容并行下載，但是該屬性必須在ie9以上的瀏覽器中才可以使用，并且只能用于加載外部js腳本。

<script async src="siteScript.js" onload="myInit()"></script>

onload 在microsft edge和ihphone手機瀏覽器不支持，myinit事件最好寫在 siteScripts.js里面。不然會導致不同步出錯。

正確：<script async src="siteScript.js" ></script>

2.同樣，在html4中也有一個defer屬性，該屬性的兼容性更好一點，但是與async一樣，可以讓js腳本實現異步加載，同樣只能用于加載外部js腳本。

顯示的順序為：normal defer window.onload

3.利用XHR異步加載js內容并執行，代碼如下

<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.動態創建script標簽，主要代碼如下

var script = document.createElement("script");

script.src = "js/test.js";

document.head.appendChild(script);

5.iframe方式，利用iframe加載一個同源的子頁面，讓子頁面內的js影響當前父頁面的一種方式。

html5代碼標準檢驗

http://validator.w3.org/

http://html5test.com/

說明：

1. js文件放在html頁面底部，則不影響頁面顯示和圖片下載，但是js事件要等到底部js下載完才會加載。

2. js文件放在head之間，則影響頁面顯示和圖片顯示，打開空白，要等js下載完才會加載文字和圖片。

廣告：