掌握腳本標籤：使用 Async 和 Defer 進行精確的腳本控制

在 Web 開發領域，最佳化頁面載入時間至關重要。 <script> 的兩個強大屬性：標籤 – 非同步和延遲 – 可以顯著影響您網站的效能。在沒有徹底理解這些屬性的情況下使用它們可能會影響效能並導致錯誤。讓我們從基礎開始，了解這些屬性的作用以及何時使用它們。 </script>

基礎知識：腳本如何加載

預設情況下，當瀏覽器遇到 <script> 時，標籤，它：</script>

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

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

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

非同步

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

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

延遲

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

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

比較行為

Attribute	Download	Execution	HTML Parsing	Main Risk
None	Blocks	Immediate	Paused	Slow Initial Render
Async	Parallel	ASAP	Paused when downloaded	Race Conditions
Defer	Parallel	After HTML	Continues	Delayed Functionality

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

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

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

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

2. 非同步腳本：

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

3. 延後腳本：

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

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

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

執行順序範例：

<script src="1.js"></script>
<script async src="2.js"></script>
<script async src="3.js"></script>
<script defer src="4.js"></script>
<script defer src="5.js"></script>

可能的執行順序：

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. 對於關鍵腳本，請考慮 中的內聯腳本。

瀏覽器支援

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

的末端。

以上是掌握腳本標籤：使用 Async 和 Defer 進行精確的腳本控制的詳細內容。更多資訊請關注PHP中文網其他相關文章！