js異步加載——defer和async的區別

　　defer的用途是代表腳本在執行時不會影響頁面的構造。也就是說，腳本會延遲到整個頁面都解析完畢後再運行。所以，在<script>元素中設置defer屬性，至關於告訴瀏覽器當即下載，但延遲執行。

　　async屬性與defer屬性相似，都用於改變處理腳本的行爲。建議異步腳本不要在加載期間修改DOM。

　　defer與async的區別是：前者要等到整個頁面正常渲染結束，纔會執行；後者一旦下載完，渲染引擎就會中斷渲染，執行這個腳本之後，再繼續渲染。一句話，defer是「渲染完再執行」，async是「下載完就執行」。另外，若是有多個defer腳本，會按照它們在頁面出現的順序加載，而多個async腳本是不能保證加載順序的。

　　1. <script src="script.js"></script>

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

　　2. <script async src="script.js"></script>

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

　　3. <script defer src="myscript.js"></script>

有 defer，加載後續文檔元素的過程將和 script.js 的加載並行進行（異步），可是 script.js 的執行要在全部元素解析完成以後，DOMContentLoaded 事件觸發以前完成。

 

 

　　藍色線表明網絡讀取，紅色線表明執行時間，這倆都是針對腳本的；綠色線表明 HTML 解析。

　　此圖告訴咱們如下幾個要點：

1. defer 和 async 在網絡讀取（下載）這塊兒是同樣的，都是異步的（相較於 HTML 解析）
2. 它倆的差異在於腳本下載完以後什麼時候執行，顯然 defer 是最接近咱們對於應用腳本加載和執行的要求的
3. 關於 defer，此圖未盡之處在於它是按照加載順序執行腳本的，這一點要善加利用
4. async 則是一個亂序執行的主，反正對它來講腳本的加載和執行是牢牢挨着的，因此無論你聲明的順序如何，只要它加載完了就會馬上執行
5. 仔細想一想，async 對於應用腳本的用處不大，由於它徹底不考慮依賴（哪怕是最低級的順序執行），不過它對於那些能夠不依賴任何腳本或不被任何腳本依賴的腳原本說倒是很是合適的，最典型的例子：Google Analytics