沒有async和defer的情況
<script src="script.js"></script>
沒有 defer 或 async，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前，也就是說(shuō)不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
async&defer的作用
-
<script async src="script.js"></script>
有 async，加載和渲染后續(xù)文檔元素的過(guò)程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。 -
<script defer src="myscript.js"></script>
有 defer，加載后續(xù)文檔元素的過(guò)程將和 script.js 的加載并行進(jìn)行（異步），但 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。
兩者區(qū)別
- async屬性是HTML5的新特性，這意味著其兼容性并不樂(lè)觀（IE10+）
defer為HTML4的版本，兼容性相對(duì)async較好。 - 每一個(gè)async屬性的腳本都在它下載結(jié)束之后立刻執(zhí)行，同時(shí)會(huì)在window的load事件之前執(zhí)行，所以就有可能出現(xiàn)腳本執(zhí)行順序被打亂的情況。
而defer屬性的腳本都是在頁(yè)面解析完畢之后，按照原本的順序執(zhí)行，同時(shí)會(huì)在document的DOMContentLoaded之前執(zhí)行。
兩者共同點(diǎn)
- 加載文件時(shí)不阻塞頁(yè)面渲染
- defer 和 async 在網(wǎng)絡(luò)讀取（下載）方面是一樣的，都是異步的
- 對(duì)于inline的script無(wú)效
- 使用這兩個(gè)屬性的腳本中不能調(diào)用document.write方法
- 有腳本的onload的事件回調(diào)
