非同步指令碼執行

script 元素的 async 屬性可讓相關指令碼與其他網頁非同步進行載入或執行。 也就是說,指令碼會在背景進行載入和執行,而網頁會同時繼續進行剖析。對需要進行大量處理指令碼的網頁來說,async 屬性可以顯著提升網頁載入的效能。

async 屬性

async 屬性是全球資訊網協會 (W3C) HTML5 規格的一部分,專為不存在指令碼相依性,但是仍要讓指令碼迅速執行的情形而設計的。在下列假想範例中,請記得,沒有 async (或 defer) 屬性時,指令碼可能會封鎖其他網頁內容,不進行載入。

Lilah 有一個使用許多指令碼操作 Widget 的個人部落格。這些 Widget 的作用在於提升訪客的使用體驗,但即使沒有載入這些 Widget 她的網頁仍可以正常運作 (她也希望可以支援停用指令碼的使用者)。她目前在 HTML 檔案的開頭載入所有 Widget,但是她的訪客抱怨網頁需要很長的時間才能完成載入,而原因就在於執行這些指令碼需要花費很長的時間。她嘗試將指令碼移到網頁尾端以提升速度,但是因為她有太多的內容,所以這些變更仍無法改善她的網站經驗。她真正想要的是讓這些 Widget 可以快速載入,但不要封鎖其他網頁。經過快速搜尋之後,她了解到 HTML5 的 async 屬性完全符合她的需求。將所有指令碼 Widget 移到外部檔案後,她的網站可以立即快速啟動並執行,而且在效能和指令碼增強功能之間取得最佳的平衡點。


<head>
  <title>Lilah's Blog</title>
  <script async src="widgets.js"></script>
</head>


實作詳細資料

Internet Explorer 10 與使用 JavaScript 的 Windows 市集應用程式都支援 script 元素的 asyncdefer 屬性 (舊版 Windows Internet Explorer 支援 defer 屬性)。asyncdefer 屬性只能在有 src 屬性時使用。以下是四種可能組合。

使用方式說明

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

指令碼立即執行,網頁則等待指令碼完成後再繼續剖析。這個方式會大幅降低網頁載入效能。

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

在網頁持續剖析的同時非同步下載指令碼。指令碼在下載完成後開始執行。

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

指令碼在網頁剖析完成後開始執行。

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

會使用 async 屬性,而忽略 defer 屬性。開發人員藉此可以在提供支援的瀏覽器中使用 async,並在不提供支援 async.的瀏覽器中改用 defer

 

總而言之,async 屬性讓 Web 開發人員可以在投入最少精力的情況下,改善網頁載入的時間。它也能減少指令碼載入器程式庫所需的瀏覽器特定因應措施數量。

API 參考

async
defer

Internet Explorer Test Drive 示範

HTML5 非同步指令碼

IEBlog 文章

JavaScript 的 "Promises" 非同步程式設計

規格

HTML5:第 4.3.1 節

 

 

顯示:
© 2014 Microsoft