什麼是async/defer

HTML做些什麼事？

在瀏覽器執行解析網頁時如果碰到<script>標籤，會先執行該script中的行為，而如果需要下載檔案則會執行下載，而此時若是執行下載時，整個網頁的解析就會停下來，等到檔案被下載後才會繼續解析，這樣有一個很大的問題，也就是當使用者瀏覽網頁時就會有些元素不是馬上出現在使用者面前，就是因為在等待JS檔案的下載，這就有關UX了。

但是又有些JS檔案是要盡可能提早被下載到client端，如果讓script 在解析完DOM才執行就會有問題，因為當頁面解析完後會馬傷需要使用JS中的功能，所以就有了async/defer的概念。

解決方法

上述問題就可以透過async/defer解決，這兩個主要都是讓script可以在背景執行，但是有個主要差異如下：

async

會在背景下載也就是異步的方式執行，在同時 HTML 解析會繼續執行，而當js檔案被下載後會被立即執行，不必等到 DOM 被全部解析。

defer

也同是在背景下載不影響DOM的解析，但是他會等到DOM完全解析完才執行，而若是有多個js有互相依賴的行為可以以 defer 方式執行，只要按照執行順序去寫script即可