HTML引入的外部javascript是什么屬性

# HTML引入的外部JavaScript是什么屬性

## 引言

在現代Web開發中，JavaScript是不可或缺的一部分。為了保持代碼的整潔和可維護性，開發者通常會將JavaScript代碼存儲在外部文件中，并通過HTML文件引入。本文將深入探討HTML中引入外部JavaScript的屬性及其相關細節。

---

## 1. `<script>`標簽基礎

在HTML中，`<script>`標簽用于嵌入或引用JavaScript代碼。當我們需要引入外部JavaScript文件時，通常會使用`<script>`標簽的`src`屬性。

### 基本語法
```html
<script src="path/to/your-script.js"></script>

屬性說明

• src：指定外部JavaScript文件的路徑。
• type（可選）：指定腳本的MIME類型，默認為text/javascript（HTML5中可省略）。
• async/defer：控制腳本的加載和執行行為（后文詳細說明）。

2. 核心屬性詳解

2.1 src屬性

src（source的縮寫）是引入外部JavaScript文件的核心屬性，其值為文件的URL。路徑可以是： - 相對路徑：如scripts/main.js。 - 絕對路徑：如/assets/js/main.js。 - 完整URL：如https://example.com/js/main.js。

示例

<!-- 相對路徑 -->
<script src="js/app.js"></script>

<!-- 完整URL -->
<script src="https://cdn.example.com/library.js"></script>

2.2 type屬性

在HTML5之前，type="text/javascript"是必需的，但HTML5將其設為默認值，因此可以省略。
其他可能的值： - module：表示腳本為ES6模塊（支持import/export）。 - application/json：用于JSON數據（非腳本）。

示例

<!-- 傳統寫法 -->
<script type="text/javascript" src="old-school.js"></script>

<!-- HTML5推薦寫法 -->
<script src="modern.js"></script>

<!-- ES6模塊 -->
<script type="module" src="module.js"></script>

2.3 async與defer屬性

這兩個屬性用于控制腳本的加載和執行時機，對頁面性能有重要影響。

async（異步加載）

• 行為：腳本異步加載，加載完成后立即執行（不保證順序）。
• 適用場景：獨立腳本（如分析工具、廣告代碼）。

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

defer（延遲執行）

• 行為：腳本異步加載，但在HTML解析完成后按順序執行。
• 適用場景：依賴DOM或需要按順序執行的腳本。

<script defer src="dependency.js"></script>
<script defer src="app.js"></script> <!-- 保證在dependency.js后執行 -->

對比表格

3. 其他相關屬性

3.1 crossorigin

用于控制跨域請求的CORS（跨源資源共享）行為： - anonymous：不發送憑據（如cookies）。 - use-credentials：發送憑據。

示例

<script crossorigin="anonymous" src="https://cdn.example.com/lib.js"></script>

3.2 integrity

用于子資源完整性（SRI）校驗，防止CDN資源被篡改。值為文件的哈希值。

示例

<script 
  src="https://example.com/jquery.min.js"
  integrity="sha384-xxxxx"
  crossorigin="anonymous">
</script>

4. 最佳實踐

1. 優先使用defer：除非腳本無需等待DOM，否則defer能提升頁面加載性能。
2. 合并腳本文件：減少HTTP請求次數。
3. 啟用壓縮：使用.min.js文件減小體積。
4. 合理使用CDN：利用公共CDN加速常用庫（如jQuery、Bootstrap）。

5. 常見問題

Q1: 為什么有時async腳本執行順序混亂？

因為async腳本加載完成后會立即執行，若多個腳本加載速度不同，執行順序無法保證。

Q2: defer和DOMContentLoaded事件的關系？

defer腳本會在DOMContentLoaded事件前執行。

Q3: 動態添加的<script>標簽默認是async嗎？

是的，通過document.createElement('script')創建的腳本默認是異步的。

結語

理解HTML中引入外部JavaScript的屬性（如src、async、defer等）是優化頁面性能和腳本管理的關鍵。通過合理選擇屬性，開發者可以顯著提升用戶體驗和代碼可維護性。

延伸閱讀：
- MDN <script>文檔
- Google開發者性能指南 “`

這篇文章總計約1350字，涵蓋了外部JavaScript引入的核心屬性、使用場景及最佳實踐，采用Markdown格式并包含代碼示例和表格對比。