如果沒有 defer 或 async 屬性，瀏覽器會(huì)立即加載并執(zhí)行相應(yīng)的腳本。它不會(huì)等待后續(xù)加載的文檔元素，讀取到就會(huì)開始加載和執(zhí)行，這樣就阻塞了后續(xù)文檔的加載。

下圖可以直觀的看出三者之間的區(qū)別:

其中藍(lán)色代表 js 腳本網(wǎng)絡(luò)加載時(shí)間，紅色代表 js 腳本執(zhí)行時(shí)間，綠色代表 html 解析。

defer 和 async 屬性都是去異步加載外部的 JS 腳本文件，它們都不會(huì)阻塞頁面的解析，其區(qū)別如下：

執(zhí)行順序： 多個(gè)帶 async 屬性的標(biāo)簽，不能保證加載的順序；多個(gè)帶 defer 屬性的標(biāo)簽，按照加載順序執(zhí)行；

腳本是否并行執(zhí)行：**async 屬性，表示**后續(xù)文檔的加載和執(zhí)行與 js 腳本的加載和執(zhí)行是并行進(jìn)行的，即異步執(zhí)行；defer 屬性，加載后續(xù)文檔的過程和 js 腳本的加載(此時(shí)僅加載不執(zhí)行)是并行進(jìn)行的(異步)，js 腳本需要等到文檔所有元素解析完成之后才執(zhí)行，DOMContentLoaded 事件觸發(fā)執(zhí)行之前。