HTML <script> async 屬性

HTML <script> 標簽

定義和用法

async 屬性是一個布爾屬性。

如果設置了 async 屬性，腳本會在解析頁面的同時并行下載，并在可用時立即執行。一旦腳本完全下載，頁面的解析就會中斷，然后執行腳本，然后繼續解析頁面的其余部分。

注意：async 屬性僅適用于外部腳本（并且只應在存在 src 屬性時使用）。

注意：可以通過多種方式執行外部腳本：

  • 如果已設置 async：腳本會在解析頁面的同時并行下載，并在可用時立即執行（在解析完成之前）
  • 如果已設置 defer（而未設置 async）：腳本會在解析頁面的同時并行下載，并在頁面解析完成后執行
  • 如果既沒有 async 也沒有 defer：腳本被立即下載并執行，阻塞頁面解析，直到腳本執行完成

實例

引用的腳本會在解析頁面的同時并行下載，并在可用時立即執行的：

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

親自試一試

語法

<script async>

異步執行腳本

瀏覽器遇到 script 元素時的默認行為是在加載和執行腳本的同時暫停處理頁面。各個 script 元素依次（按其定義的次序）同步（在腳本加載和執行過程中不再管別的事情）執行。

作為處理腳本的默認方式，同步順序執行自有其意義。不過有些腳本并不需要這樣處理，對這類腳本可以使用 async 屬性提高其性能。這方面的一個典型例子是跟蹤腳本（tracking script）。這種腳本可以匯報用戶的網站訪問記錄以便廣告公司根據用戶的習慣定制和投放廣告，或者搜集網站訪問者的統計數據以供分析，諸如此類。這些腳本自成一體，一般不需要與 HTML 文檔中的元素互相作用。為等待它們加載然后向自己的服務器發回報告而推遲顯示頁面沒有任何意義。

使用了 async 屬性后，瀏覽器將在繼續解析 HTML 中其他元素（包括其他 script 元素）的同時異步加載和執行腳本。如果運用得當，這可以大大提高整體加載性能。

注意：使用 async 屬性的一個重要后果是頁面中的腳本可能不再按定義它們的次序執行。因此，如果腳本使用了其他腳本中定義的函數或值，那就不宜使用 async 屬性。

瀏覽器支持

表中的數字注明了首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 10.0 3.6 5.1 15.0

HTML <script> 標簽