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后执行 -->

对比表格

属性	加载方式	执行时机	顺序保证
无	同步	遇到标签时立即执行	是
async	异步	加载完成后立即执行	否
defer	异步	HTML解析完成后执行	是

---

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格式并包含代码示例和表格对比。