基本概念

默認(rèn)情況下js的腳本執(zhí)行是同步和阻塞的，但是 <script> 標(biāo)簽有 defer 和 async 屬性, 這可以改變腳本的執(zhí)行方式。
如：

要注意一點(diǎn)，html5 中這些屬性只在和src屬性聯(lián)合使用時(shí)才有效。
如果同時(shí)指定了兩個(gè)屬性，則會(huì)遵從async屬性而忽略defer屬性。

作用

• defer 屬性標(biāo)注的腳本是延遲腳本，使得瀏覽器延遲腳本的執(zhí)行，也就是說(shuō)，腳本會(huì)被異步下載但是不會(huì)被執(zhí)行，直到文檔的載入和解析完成，并可以操作，腳本才會(huì)被執(zhí)行。

• async 屬性標(biāo)注的腳本是異步腳本，即異步下載腳本時(shí)，不會(huì)阻塞文檔解析，但是一旦下載完成后，立即執(zhí)行，阻塞文檔解析。

區(qū)別

延遲腳本會(huì)按他們?cè)谖臋n里的出現(xiàn)順序執(zhí)行

異步腳本在它們載入后執(zhí)行，但是不能保證執(zhí)行順序。

兩者的區(qū)別在于執(zhí)行時(shí)的不同：

async 腳本在script文件下載完成后會(huì)立即執(zhí)行,并且其執(zhí)行時(shí)間一定在 window的load事件觸發(fā)之前。這意味著多個(gè)async腳本很可能不會(huì)按其在頁(yè)面中的出現(xiàn)次序順序執(zhí)行。
與此相對(duì)，瀏覽器確保多個(gè) defer 腳本按其在HTML頁(yè)面中的出現(xiàn)順序依次執(zhí)行,且執(zhí)行時(shí)機(jī)為DOM解析完成后，document的DOMContentLoaded 事件觸發(fā)之前。

所以說(shuō)，async 是一個(gè)亂序執(zhí)行的主，反正對(duì)它來(lái)說(shuō)腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會(huì)立刻執(zhí)行
仔細(xì)想想，async 對(duì)于應(yīng)用腳本的用處不大，因?yàn)樗耆豢紤]依賴(lài)（哪怕是最低級(jí)的順序執(zhí)行），不過(guò)它對(duì)于那些可以不依賴(lài)任何腳本或不被任何腳本依賴(lài)的腳本來(lái)說(shuō)卻是非常合適的。
defer和async的主要不同就是defer會(huì)保證腳本的順序，defer 是最接近我們對(duì)于應(yīng)用腳本加載和執(zhí)行的要求的。