因為JavaScript具有兩個特性：
- JavaScript會阻塞后面內(nèi)容的呈現(xiàn)
- JavaScript會阻塞其后組件的下載
因此為了能保證最基本的瀏覽需求猜年，所以有時候會考慮到異步加載。
利用 async或者defer異步延遲加載腳本
如果沒有async或者defer，瀏覽器在讀取到JavaScript時會立即加載并執(zhí)行指定的腳本啼止。但是糯耍，JavaScript是對文檔的元素進(jìn)行操作周霉，如果沒有解析Html直接加載JavaScript，有可能會出現(xiàn)報錯菩咨。
用法：
async：相對于頁面的其他部分異步執(zhí)行。作用是不讓頁面等待兩個或兩個以上的腳本下載和執(zhí)行陡厘，從而異步加載頁面的其他內(nèi)容抽米。
<!DOCTYPE html>
<head>
<title>title</title>
<script type="text/javascript" async src="a.js"></script>
<script type="text/javascript" async src="b.js"></script>
</head>
<body>
<!-- 內(nèi)容 -->
</body>
</html>
因為async屬性是HTML5新增屬性，需要Chrome糙置、FireFox云茸、IE9+瀏覽器支持，并且不保證加載順序谤饭。
defer：延遲到整個頁面都解析完畢后在執(zhí)行标捺。
<!DOCTYPE html>
<head>
<title>title</title>
<script type="text/javascript" defer src="a.js"></script>
<script type="text/javascript" defer src="b.js"></script>
</head>
<body>
<!-- 內(nèi)容 -->
</body>
</html>
兼容所有瀏覽器。理論上確保所有設(shè)置了defer屬性的腳本按順序執(zhí)行揉抵。
共同點：
- 設(shè)置了
async或者defer屬性的腳本不會阻塞頁面渲染 -
async和defer屬性決定了js腳本的執(zhí)行方式亡容，內(nèi)聯(lián)腳本會忽略這兩個屬性。僅針對外部腳本起作用 - 使用這兩個屬性的腳本中不能調(diào)用
document.write
區(qū)別：
異步腳本一定會在頁面的load事件前執(zhí)行冤今，但可能在DOMContentLoaded事件觸發(fā)之前或之后執(zhí)行闺兢，所以可能出現(xiàn)無序加載js的情況；延遲腳本在文檔完成解析后戏罢，執(zhí)行理論上是有序的屋谭，但現(xiàn)實中并不能保證順序，也不一定會在DOMContentLoaded事件觸發(fā)前執(zhí)行龟糕。
