在 Web 開發領域，優化頁面載入時間至關重要。

基礎知識：腳本如何加載

預設情況下，當瀏覽器遇到

1. 暫停 HTML 解析
2. 下載腳本
3. 執行腳本
4. 繼續 HTML 解析

此過程會減慢頁面渲染速度，特別是對於大型腳本或緩慢的連接。此外，如果腳本在某些 HTML 元素完全載入之前執行，則可能會導致錯誤，如果腳本未正確放置在文件中，這種情況通常會發生。

非同步與延遲：一把雙面刃

非同步

• 它的作用： 在 HTML 解析繼續的同時非同步下載腳本。
• 執行時：下載完成後，暫停 HTML 解析。
• 使用時：不依賴其他腳本或DOM內容的獨立腳本。
• 警告： 可能會亂序執行，可能會破壞依賴關係。

延遲

• 它的作用： 在 HTML 解析繼續的同時下載腳本。
• 執行時： HTML解析完成之後，DOMContentLoaded事件前。
• 使用時：依賴DOM內容或需要以特定順序執行的腳本。
• 警告： 可能會延遲關鍵功能的執行。

比較行為

執行順序：非同步、延遲和兩者

了解具有不同屬性的腳本的執行順序對於管理依賴關係和確保正確的功能至關重要。其運作原理如下：

1. 常規腳本（無非同步或延遲）：

   • 依照它們在文件中出現的順序執行。
   • 阻止 HTML 解析，直到下載並執行它們。

2. 非同步腳本：

   • 並行下載並在可用時立即執行。
   • 不保證執行順序；它們一下載就運行。
   • 可能在 DOM 完全載入之前執行。

3. 延遲腳本：

   • 並行下載，但僅在 HTML 解析完成後執行。
   • 依照它們在文件中出現的順序執行。
   • 在 DOMContentLoaded 事件之前執行。

4. 同時具有非同步且延遲的腳本：

   • async 屬性在現代瀏覽器中優先。
   • 在不支援非同步的舊版瀏覽器中，它們會回退到延遲行為。

執行順序範例：

可能的執行順序：

1. 1.js（區塊解析）
2. 3.js 或 2.js（以先下載者為準）
3. 2.js 或 3.js（以第二個下載者為準）
4. 4.js
5. 5.js

請注意，如果 1.js 下載時間較長，則 2 和 3 可以按任何順序執行，甚至可以在 1 之前執行。

最佳實踐

1. 將非同步用於分析等獨立腳本。
2. 對依賴 DOM 或其他腳本的腳本使用 defer。
3. 將腳本放置在 中，非同步或延遲提前開始下載。
4. 對於關鍵腳本，請考慮 中的內聯腳本。

瀏覽器支援

現代瀏覽器廣泛支援非同步和延遲。對於較舊的瀏覽器，請考慮使用腳本載入器或將腳本放置在