非同步與延遲：腳本載入的簡單說明-js教程-PHP中文網

非同步與延遲：腳本載入的簡單說明

Linda Hamilton

發布： 2024-11-08 08:29:02

原創

637 人瀏覽過

在網站中載入 JavaScript 時，了解不同的載入方法如何影響網站的效能和行為非常重要。 JavaScript 可以透過多種方式加載，主要使用預設載入方法、async 和 defer。這些方法中的每一種都有其自己的特點和用例。在這篇文章中，我們將探討這三種方法，以幫助您為專案做出明智的決策。

Async vs. Defer: A Simple Explanation of Script Loading

預設載入

預設情況下，JavaScript 檔案包含在 HTML 文件中時會同步載入。這意味著瀏覽器將暫停解析 HTML 文件以下載並執行 JavaScript 文件，然後再繼續。

以下是使用預設方法通常包含腳本的方式：

async 屬性允許瀏覽器在繼續解析 HTML 文件的同時非同步下載 JavaScript 檔案。下載腳本後，它會立即執行，可能會在 HTML 解析完成之前執行。

defer 屬性也是非同步下載 JavaScript 文件，但關鍵差異在於腳本僅在 HTML 文件完全解析後執行。

Async vs. Defer: A Simple Explanation of Script Loading

對非關鍵腳本使用非同步：對於分析、廣告和其他不依賴 DOM 的第三方整合等腳本。
對 DOM 相關腳本使用 defer：對於操作 DOM 或需要以特定順序執行的腳本。
最小化預設腳本載入：避免對大型腳本或可以非同步載入的腳本進行預設同步載入。
在正文底部載入腳本：如果必須使用預設載入行為，請將 <script> 放置在正文底部。 <body> 末尾的標籤確保 HTML 內容首先載入。 </script>