怎么在HTML中引入外部js文件

1. 核心语法：使用 script 标签与 src 属性

将 JavaScript 代码保存在独立的 .js 文件中，并通过 HTML 标签引入，是现代 Web 开发的基本规范。这种方式不仅实现了“结构（HTML）”与“行为（JavaScript）”的清晰解耦，还能充分利用浏览器的 HTTP 缓存机制，避免重复下载同一段脚本，从而提升后续页面的访问速度。

引入外部脚本的核心语法非常简洁，只需要在 HTML 中编写如下代码：

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

这里有两个必须遵守的关键规则：

• 必须使用 src 属性：该属性用于告知浏览器目标脚本资源的存放位置，其值可以是相对路径、根绝对路径或完整的 CDN 网址。
• 标签必须成对出现并闭合：即使该 <script> 标签内没有任何代码，也必须显式写出闭合标签 </script>。在 HTML 规范中，<script> 不是自闭合标签，不能写成 <script src="..." />，否则会导致浏览器解析错误，甚至造成其后续的 HTML 内容全部丢失或停止渲染。

编写独立 JS 文件的注意事项

在创建外部 .js 文件（例如 main.js）时，文件内部只需编写合法的 JavaScript 代码。初学者常犯的一个错误是在 .js 文件中再次书写 <script> 标签，这会导致浏览器报语法错误（如 SyntaxError: Unexpected token '<'）。例如在 main.js 中直接写：

// main.js 文件内部直接书写脚本代码
function greet() {
  console.log("外部脚本加载成功！");
}

greet();

2. 标签放置位置：放在 head 还是 body 底部？

确定了语法格式后，紧接着需要决定的就是将 <script> 标签写在 HTML 文档的什么位置。传统上主要有两种摆放位置，它们对页面的加载顺序和性能有显著差异。

放置在 <head> 内部及其缺点

如果直接将普通的 <script src="main.js"></script> 放在 <head> 中，浏览器自上而下解析 HTML 文档时，一旦遇到该标签，会立即暂停 DOM 树的解析构建，等待该脚本文件从网络下载完毕并执行结束，然后才会继续解析后续的 <body> 内容。

这种“同步阻塞”特性会带来两个典型问题：

1. 首屏白屏时间变长：如果网络状况较差或脚本体积较大，用户会长时间面对空白页面。
2. DOM 获取失败：此时 <body> 中的元素尚未被解析，如果脚本中尝试使用 document.getElementById() 或 document.querySelector() 查找页面元素，会直接返回 null，导致报错。

放置在 <body> 闭合标签正上方（传统经典做法）

为了解决上述阻塞问题，长年以来的标准实践是将所有普通 <script> 标签统一放置在 </body> 闭合标签的最底部，例如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>示例页面</title>
</head>
<body>
  <h1 id="title">欢迎访问</h1>
  <p>正文内容区域...</p>

  <!-- 放在 body 闭合标签前，确保 DOM 已完全解析 -->
  <script src="js/main.js"></script>
</body>
</html>

这样做的好处是浏览器在遇到脚本之前，已经解析并绘制了页面上的所有 HTML 结构，用户能够立即看到页面内容，同时脚本中操作任何 DOM 节点都能确保元素已经存在。

3. 现代性能优化：defer 与 async 属性

把脚本放在 </body> 底部虽然解决了 DOM 获取问题，但脚本的下载过程必须等到 HTML 解析到最后才开始，并没有充分利用浏览器的并发网络下载能力。HTML5 引入了两个布尔属性：defer 和 async，它们允许我们将脚本安全地放回 <head> 中，并在后台异步下载，彻底消除阻塞。

defer（延迟执行）——最推荐的日常业务方案

当给 <script> 添加 defer 属性时，浏览器在解析 HTML 的同时会在后台并行下载脚本；而脚本的实际执行会被推迟到整个 HTML 文档解析完成之后、DOMContentLoaded 事件触发之前执行。

<!-- 推荐写法：放在 head 中，后台下载，HTML 解析完成后顺序执行 -->
<script defer src="js/vendor.js"></script>
<script defer src="js/app.js"></script>

defer 具有两个极其重要的保障：

• DOM 访问安全：执行时 DOM 树已经构建完成，可安全操作任意页面节点。
• 保证书写顺序：如果页面中有多个带 defer 的脚本（如上述 vendor.js 和 app.js），浏览器会严格按照它们在 HTML 中出现的顺序依次执行，确保依赖关系不被破坏。

async（异步执行）——独立组件与统计打点专属

给 <script> 添加 async 属性同样会开启后台并行下载，但它的执行策略是“一旦下载完毕，立即暂停 HTML 解析并马上执行脚本”。

<!-- 适用于独立无依赖的第三方库或统计脚本 -->
<script async src="https://example.com/analytics.js"></script>

由于各网络请求返回耗时不可控，async 具有完全的“乱序执行”特性。如果两个脚本互相依赖，或者脚本需要访问尚未构建好的 DOM 元素，使用 async 极易引发竞态错误。因此，async 仅适用于 Google Analytics、百度统计、独立广告监测等不依赖页面 DOM、也不被其他脚本依赖的纯独立模块。

4. 路径编写与定位：相对路径与绝对路径

src 属性的路径书写是否正确，直接决定了浏览器能否成功找到文件。在实际项目中，路径主要分为相对路径和绝对路径两大类。

相对路径的计算规则

相对路径以“当前 HTML 文件所在的物理目录”为基准进行寻找：

• 同级文件：如果 index.html 和 main.js 在同一目录下，写 src="main.js" 或 src="./main.js" 均可（推荐使用 ./ 显式表达同级）。
• 子级目录：如果脚本放在子文件夹中，使用斜杠进入，如 src="js/main.js" 或 src="./assets/js/main.js"。
• 父级/上级目录：使用 ../ 返回上一级。如果 HTML 位于 views/user/profile.html，需要引用根目录 js/common.js，则应写为 src="../../js/common.js"。

绝对路径与远程 CDN

绝对路径不随 HTML 所在目录的深浅而改变：

• 网站根绝对路径：以单斜杠 / 开头，例如 src="/static/js/app.js"。浏览器会直接从当前 Web 服务器的根域名（如 http://localhost:8080/static/js/app.js）寻找资源。注意：如果是在本地双击通过 file:/// 协议打开 HTML 文件，使用根绝对路径会导致解析到操作系统的根磁盘驱动器，从而导致找不到文件。
• 完整 URL / CDN 引入：包含完整的网络协议和域名，适用于引入大型公开开源库，如：

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

5. 模块化开发：使用 type="module" 引入 ES 模块

在现代前端工程中，JavaScript 支持官方的 ES6 模块规范（通过 import 和 export 分割代码）。要在浏览器中直接加载模块化文件，需为 <script> 标签添加 type="module" 属性：

<!-- 声明这是一个 ES 模块脚本 -->
<script type="module" src="./js/app.js"></script>

使用 type="module" 引入外部脚本时，具有以下几条原生机制：

1. 默认具备 defer 行为：带有 type="module" 的外部脚本会自动延迟执行，即便写在 <head> 中，也不会阻塞 HTML 解析，并在 DOM 树就绪后依序执行。
2. 独立模块作用域：模块顶层声明的变量、函数不会污染全局 window 对象，各模块之间只能通过 export 导出和 import 引入进行交互。
3. 遵循严格模式：代码默认在 "use strict" 模式下执行。
4. 跨域要求（CORS）：模块化脚本受浏览器的同源安全策略限制。如果直接使用文件协议（file:///）在本地双击打开，浏览器控制台会报跨域错误（CORS policy 拦截）。因此，调试 type="module" 必须通过本地 HTTP 服务（如 VSCode 的 Live Server 插件、Node.js 静态服务器或 Python 的 python -m http.server）运行。

6. 常见误区辨析与避坑指南

在日常开发和技术交流中，有一些容易让人产生困惑或写出隐蔽 Bug 的用法，在此进行逐一辨析：

误区一：“在带有 src 的 script 标签内书写内联代码，作为备用或补充”

有些初学者会在同一个标签中同时写上 src 和 JavaScript 代码，例如：

<!-- 错误示范：标签内部的内联代码会被浏览器彻底忽略 -->
<script src="js/main.js">
  console.log("准备运行脚本"); // 这段代码永远不会被执行！
</script>

原因解释：HTML 规范规定，当 <script> 标签存在 src 属性时，该标签内部包含的所有文本内容都会被忽略。如果既需要引入外部公共库，又需要写一段自定义内联逻辑，正确的做法是拆分为两个独立的标签：

<!-- 正确做法：分成两个标签书写 -->
<script src="js/main.js"></script>
<script>
  console.log("外部脚本加载后的业务逻辑");
</script>

误区二：“HTML5 中标签可以自闭合，所以 script 也能自闭合”

在 HTML5 中，像 <img>、<input>、<br> 属于空元素（void elements），无需闭合标签。但 <script> 并不属于空元素，如果写成 <script src="main.js" />，HTML 解析器会认为该标签一直没有闭合，进而将后面紧随的所有 HTML 标签统统误当作脚本内容吞噬，造成整片页面渲染瘫痪。务必坚持写完整的 </script>。

误区三：“给内联 script 加上 defer 或 async 能提升性能”

defer 和 async 属性只对拥有 src 属性的外部脚本生效。直接写在 <script>内联代码</script> 上的 defer 或 async 会被浏览器直接忽略，内联代码依然是同步执行的。

7. 引入方案总结与选型决策

面对不同的开发场景与业务需求，可以参考下方的决策流进行快速选择：

为了便于快速查阅，各类引入模式的核心属性与适用场景对比如下表所示：

综上所述，在 HTML 中引入外部 JS 文件是一项兼顾语法正确性与性能考量的基础操作。编写时牢记成对闭合 <script src="路径"></script>，在日常项目中优先采用 <head> 配合 defer 属性或现代 type="module"，即可确保代码在高效并发下载的同时安全地访问 DOM 元素。