Skip to main content

[JS] Async, defer attributes

Imgur

script#

Imgur

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

整個網頁的繪製會停下,等 demo.js 下載完並執行完後,網頁繪製才繼續。

defer#

Imgur

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

網頁繪製不會停下, demo.js 在背景下載,待 DOMContentLoaded 再執行 demo.js

使用 defer 能夠保證 scripts 檔會按照 document 中的順序執行,此外 script 中的內容會在 DOM 載完後才執行,但是因為不是所有的瀏覽器都支援,因此不要太依賴它。

在 Firefox 中使用 defer 可能會使得 CSS 檔案較慢載入。

async#

Imgur

網頁繪製不會停下, demo.js 在背景下載。待 demo.js 下載完畢,網頁繪製停下,執行 demo.js 。待 demo.js 執行完畢,網頁繪製繼續。

只能在各 script 間沒有相依的情況下使用。

參考資料#

Last updated on