HTML中最熟悉的陌生人:<script>標(biāo)簽必知必會

freeflydom

2025年4月12日 9:24 本文熱度 464

<script>標(biāo)簽用于在HTML中引入js,本文主要討論三方面:

加載與執(zhí)行的區(qū)別

腳本的加載（Loading）與執(zhí)行（Execution）是兩個獨(dú)立的概念，它們的行為和影響因素不同，理解這一點(diǎn)對我們后面的討論至關(guān)重要.

不阻塞 DOM 解析,瀏覽器會先解析完整的 HTML，最后再加載和執(zhí)行腳本，不會影響頁面渲染速度。用戶能更快看到頁面內(nèi)容（減少 FCP，F(xiàn)irst Contentful Paint）。
腳本執(zhí)行時 DOM 已就緒,腳本運(yùn)行時，整個 DOM 已經(jīng)解析完成，可以安全操作 DOM 元素，無需等待 DOMContentLoaded 事件。
適用場景
- 推薦的經(jīng)典做法，適用于大多數(shù)情況，特別是依賴 DOM 的腳本（如交互邏輯、初始化組件）。
- 如果腳本較大，仍可能影響 DOMContentLoaded 事件觸發(fā)時間。

遵循多個腳本按書寫順序依次加載并執(zhí)行的原則。

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

行為：
- 腳本異步加載（不阻塞 HTML 解析），但會延遲到 DOM 解析完成后、DOMContentLoaded 事件前按順序執(zhí)行。
- 適用于需要操作 DOM 或依賴其他腳本的場景。
特點(diǎn)：
- 保證腳本的執(zhí)行順序（與書寫順序一致）。
- 天然支持“等 DOM 就緒”，類似 DOMContentLoaded。

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

行為：
- 腳本異步加載（不阻塞 HTML 解析），加載完成后立即執(zhí)行（可能中斷 HTML 解析）。
- 適用于獨(dú)立腳本（如統(tǒng)計代碼、第三方 SDK）。
特點(diǎn)：
- 不保證執(zhí)行順序（誰先加載完誰先執(zhí)行）。
- 不適合操作 DOM 的腳本（可能 DOM 還未解析完）。

<script type="module" src="module.js"></script>

場景：

你的代碼需要按模塊化拆分，通過 import 引入其他模塊或通過 export 暴露功能。

<script type="module">
  import { utils } from './utils.js';
  import Component from './Component.js';
</script>

行為：
- 避免全局變量污染，依賴關(guān)系清晰，適合大型項(xiàng)目。
- 默認(rèn)具有 defer 行為（異步加載，DOM 解析后執(zhí)行）。
- 若顯式添加 async（如 <script type="module" async>），則行為類似 async。
特點(diǎn)：
- 支持 ES6 模塊語法（import/export）。
- 自動啟用嚴(yán)格模式。
- 模塊腳本默認(rèn)延遲執(zhí)行，且按依賴關(guān)系順序執(zhí)行。