一般而言，JavaScript腳本是建議放在body標簽的底部，因為使用script標簽加載JS時，會停止加載后面的內(nèi)容而停下來解析腳本，并對頁面進行渲染，使用script屬性加載外部腳本也會造成這樣的情況，這樣的話，如果在head或者是body的前面放入過多的script標簽，并且內(nèi)容很多的時候，會造成頁面在解析完所有script標簽的內(nèi)容前，有短暫的時間白屏（整個頁面空白），給用戶的體驗會很差。但是如果所有的腳本都放在底部，又會造成DOM加載完畢后，有一段時間，頁面雖然能看到，但是和用戶的交互會很差，因此需要讓一些腳本與頁面，異步加載！
- 在html5中，script新增了async的屬性，script添加了該屬性之后，下載腳本時將可以與頁面其他內(nèi)容并行下載，但是該屬性必須在IE9以上的瀏覽器中才可以使用，并且只能用于加載外部JS腳本
- 同樣在html4中，也有一個defer屬性，該屬性的交融性更好一點，但是與async一樣，可以讓js腳本實現(xiàn)異步加載。同樣只能用于加載外部腳本。
async與defer屬性的不同點是：
async會讓腳本在加載完可用時，立即執(zhí)行，但是derfer腳本則會在DOM加載完畢后執(zhí)行，defer腳本的執(zhí)行會在window.onload之前，其他沒有添加defer屬性的script標簽之后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script>
window.onload= function (){
console.log("window.onload");
}
</script>
<script src="defer.js" defer> </script>
<script >
console.log("hello");
</script>
<body>
</body>
</html>
顯示順序為hello , defer, window.onload
- 利用XHR異步加載JS內(nèi)容并執(zhí)行，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script>
<script>
var xhr = new XMLHttpRequest() ;
xhr.open("get", "defer.js", true)
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readystate == 4 && xhr.status == 200){
eval (xhr.responseText);
}
}
</script>
</script>
<body>
</body>
</html>
- 動態(tài)創(chuàng)建script標簽，代碼如下：
<script>
var script = document.createElement("script");
script.src = "defer.js";
document.head.appendchild(script);
</script>
- iframe方式，利用iframe加載一個同源的子頁面，讓子頁面js影響當(dāng)前父頁面的一種方式
