async與defer的區別

LT先生發表於2024-02-02

`async` 和 `defer` 是兩種不同的JavaScript特性,它們的主要區別在於它們的執行順序和時間點。

  • `async` 意味著函式或程式碼塊會被非同步執行。當瀏覽器遇到帶有 `async` 屬性的資源時,它會立即開始下載該資源,同時繼續載入頁面。這樣可以避免由於同步執行而導致的頁面載入阻塞問題。然而,由於 `async` 並不保證具體的執行時間,所以如果在 `async` 程式碼中修改了 DOM(文件物件模型),可能會出現錯誤,特別是在依賴外部資源的場景下。

  • `defer` 則是一種用於推遲執行的特性。它允許將指令碼放置到頁面的最後部分,直到其他所有資源都已載入完畢。這樣確保了在執行 `defer` 程式碼之前,頁面已經完全準備好,從而減少了潛在的錯誤風險。特別是對於那些依賴於外部資源的第三方指令碼來說,使用 `defer` 可以提高應用的穩定性。

總結來說,`async` 更適合於不需要等待頁面完整載入即可執行的第三方指令碼,因為它提供了更高的靈活性,但可能伴隨著一定的執行時機的不確定性。而 `defer` 則是為了確保頁面載入完成後才執行指令碼,減少因頁面未載入完全而引發的錯誤。

相關文章