script tag 屬性 async defer 差別

script tag 屬性 async defer 差別

於必須配合 src attribute 之下的 <script> tag,將有兩種屬性四種情況可用。

 

一、無指定

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

當讀到demo.js區段時,整個網頁的繪製會先中斷,等待 demo.js 下載(script fetch)完並執行(script execution)完畢後,網頁繪製才繼續。

 

二、defer 屬性

<script src="demo.js" defer ></script>

當讀到demo.js區段時,網頁繪製不會停下, 並且 demo.js 也在背景下載,

待 DOMContentLoaded 也就是網頁繪製全做完後,再來執行 demo.js 。

 

三、async 屬性

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

當讀到demo.js區段時,網頁繪製不會停下,並且 demo.js 在背景下載;

待 demo.js 下載完畢,網頁繪製停下,開始執行 demo.js;

待 demo.js 執行完畢,網頁繪製繼續。

 

四、async + defer 屬性

<script src="demo.js" defer async></script>

當讀到demo.js區段時,網頁繪製不會停下, 並且 demo.js 也在背景下載,

待 DOMContentLoaded 也就是網頁繪製全做完後,再來以非同步執行執行 demo.js 。

 

時序圖

photo by Karan Sharma

 

參考資料:

HTML <script> Tag

async vs defer attributes

Page lifecycle: DOMContentLoaded, load, beforeunload, unload