defer和async的區別

，當瀏覽器碰到script指令碼的時候：

沒有defer或async，瀏覽器會立即載入並執行指定的指令碼，「立即」指的是在渲染該script標籤之下的文件元素之前，也就是說不等待後續載入的文件元素，讀到就載入並執行。

有async，載入和渲染後續文件元素的過程將和script.js的載入與執行並行進行（非同步）。

有defer，載入後續文件元素的過程將和script.js的載入並行進行（非同步），但是script.js的執行要在所有元素解析完成之後，domcontentloaded事件觸發之前完成。

然後從實用角度來說呢，首先把所有指令碼都丟到之前是最佳實踐，因為對於舊瀏覽器來說這是唯一的優化選擇，此法可保證非指令碼的其他一切元素能夠以最快的速度得到載入和解析。

接著，我們來看一張圖咯：

藍色線代表網路讀取，紅色線代表執行時間，這倆都是針對指令碼的；綠色線代表 html 解析。

此圖告訴我們以下幾個要點：

關於 defer，此圖未盡之處在於它是按照載入順序執行指令碼的，這一點要善加利用

async 則是乙個亂序執行的主，反正對它來說指令碼的載入和執行是緊緊挨著的，所以不管你宣告的順序如何，只要它載入完了就會立刻執行

仔細想想，async 對於應用指令碼的用處不大，因為它完全不考慮依賴（哪怕是最低階的順序執行），不過它對於那些可以不依賴任何指令碼或不被任何指令碼依賴的指令碼來說卻是非常合適的，最典型的例子：google analytics