defer / async in <script> tag

defer / async in <script> tag

  • defer:與頁面一同下載,但是會等到頁面下載完畢之後再執行,如果有兩個以上的<script> 的話,使用 defer attribute 可以保證執行的順序是依照 document 結構。

  • async:與頁面一同下載,下載完畢之後馬上執行,不會等待頁面渲染完畢,如果有兩個以上的 <script> 的話,是無法保證執行的順序, async attribute 是先下載完的先執行。

  • 如果都沒有標示的話,該 script 會依照文件結構的順序下載並執行,有可能會 block 住畫面的繪製,通常會將 <script> tag 放到文件的最後,與 defer 不同的地方在於,defer 可以很早就開始下載,而把 <script> 放到文件最後則是要等到此段語法被解析的時候才會開始下載。