网页中怎么引入JavaScript脚本？内联与外部文件详解

在网页中运行 JavaScript 脚本，本质上都是通过 HTML 提供的 <script> 标签来实现的。实现路径主要有两种：直接将代码嵌入在 HTML 标签内部的“内联脚本”（Inline Script），以及将代码独立存放在 .js 文件中并通过 src 属性引入的“外部脚本”（External Script）。掌握这两种引入方式的语法规范、放置位置以及加载控制属性，是理解网页渲染流程与前端性能优化的基本功。

一、内联脚本：在 HTML 内部直接运行代码

内联脚本是指直接在 HTML 文档的 <script> 与 </script> 标签之间编写 JavaScript 代码。浏览器在解析 HTML 遇到该标签时，会立即暂停后续解析，直接在当前环境中编译并执行其中的脚本语句。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>内联脚本示例</title>
</head>
<body>
  <h1 id="headline">欢迎访问</h1>

  <script>
    // 直接在 HTML 中编写 JavaScript 代码
    const heading = document.getElementById('headline');
    heading.textContent = '你好，JavaScript！';
    console.log('内联脚本执行完毕');
  </script>
</body>
</html>

内联脚本的核心特性与使用注意事项包括：

• 无需额外网络请求：脚本代码作为 HTML 响应正文的一部分同时到达浏览器，不会产生额外的 HTTP 请求握手开销。
• 无法独立利用浏览器缓存：内联脚本与当前 HTML 文件绑定，每次用户重新加载 HTML，脚本代码都会随页面全量下载，无法像独立文件那样被浏览器持久化缓存。
• 闭合标签转义风险：在内联脚本的字符串中不能直接出现 </script> 字样。HTML 解析器在遇到 </script> 时会无视 JavaScript 语法判定其为标签结束，导致脚本截断报错。如需输出该字符串，应拆分书写为 '</' + 'script>'。
• 适用场景：适合体积极小的首屏关键配置（例如服务端渲染注入的全局环境变量 window.__INITIAL_DATA__）或页面特有的少量一次性逻辑。

二、外部文件：使用 src 属性解耦与共享代码

在正规项目开发中，绝大多数 JavaScript 代码都会保存在以 .js 为后缀的独立文件中，并通过 <script src="路径"></script> 引入。这种做法实现了 HTML 内容结构与 JavaScript 行为逻辑的分离。

1. 创建独立的 JavaScript 文件

在项目根目录或 js 资源目录下新建文本文件，命名为 app.js。注意：外部 .js 文件中只能包含纯 JavaScript 语法，绝对不能在文件开头或结尾编写 <script> 标签。

// 文件路径：js/app.js
function showGreeting(userName) {
  const message = '你好，' + userName + '！欢迎阅读本篇教程。';
  console.log(message);
  return message;
}

document.addEventListener('DOMContentLoaded', function () {
  showGreeting('开发者');
});

2. 在 HTML 中配置引用路径

通过 <script src="..."></script> 将其引入。src 属性的值可以是相对路径，也可以是绝对路径或 CDN 网络地址：

<!-- 同级目录下的相对路径 -->
<script src="app.js"></script>

<!-- 子目录中的相对路径（最常见结构） -->
<script src="assets/js/main.js"></script>

<!-- 上级目录的相对路径 -->
<script src="../scripts/utility.js"></script>

<!-- 网站根路径（绝对路径） -->
<script src="/static/js/bundle.js"></script>

<!-- 第三方 CDN 绝对 URL -->
<script src="https://cdn.example.com/libs/axios.min.js"></script>

三、脚本应该放在哪里？Head 与 Body 底部的解析差异

浏览器在加载网页时采用从上至下的单线程流式解析机制。当 HTML 解析器在文档中遇到未经优化的普通 <script> 时，解析过程会被强制挂起（阻塞），直到该脚本下载完成并完全执行，才会继续向下构建 DOM 树。

1. 放在 <head> 内部的传统问题

若将普通 <script> 放在 <head> 中，在庞大的 JS 文件下载和执行完毕前，浏览器不会绘制下方的 <body> 内容，用户会看到长时间的“白屏”。此外，此时页面上的 DOM 节点尚未生成，脚本中若直接执行 document.getElementById() 操作 DOM，将直接获取到 null 并抛出异常。

2. 传统解决方案：放置在 </body> 闭合标签之前

为了避免白屏，Web 开发中长期通行的经验是将 <script> 统一移动到 </body> 结束标签的前一行。此时 HTML 骨架和文字内容已经解析完毕并呈现给用户，脚本在最后下载执行，既保证了操作 DOM 时的安全性，又提升了视觉感知速度。

3. 现代性能方案：defer 与 async 属性

HTML5 规范为外部脚本引入了两个关键布尔属性，允许开发者直接将脚本定义在 <head> 中，同时完全不阻塞页面的初步渲染：

• defer（延迟执行）： 通知浏览器在后台以独立线程并行下载脚本，不暂停 HTML 解析。所有带 defer 的脚本下载完成后，会严格按照它们在 HTML 中出现的先后顺序，等待整个 DOM 树构建完毕、在 DOMContentLoaded 事件触发前依序执行。这是目前现代网页加载业务核心脚本的首选方案。

  <!-- 推荐：放在 head 中，并行下载且在 DOM 解析完毕后按序执行 -->
  <script defer src="js/vendor.js"></script>
  <script defer src="js/main.js"></script>

• async（异步加载）： 通知浏览器后台并行下载脚本，但只要下载完成，立即暂停当前的 HTML 解析并插队执行。各个 async 脚本之间的执行顺序完全取决于谁的网络包先下载完，与代码书写顺序无关。因此它只适用于完全独立的第三方模块（如百度统计、Google Analytics、广告代码），不能用于相互依赖的业务模块。

  <!-- 独立统计脚本：异步加载，不保证与其它脚本的执行先后 -->
  <script async src="https://hm.baidu.com/hm.js?example"></script>

四、内联脚本与外部脚本的多维特性对比

选择内联还是外部文件，需要权衡性能、复用与架构可维护性。以下是两者在核心维度的详细对比：

五、引入过程中的常见问题与排查定位

在实际编码中，引入脚本时常常会遇到控制台报错或脚本未生效的情况。常见原因及解决思路如下：

1. 资源 404 Not Found 错误

浏览器控制台显示 GET http://.../js/app.js 404 (Not Found)。这代表浏览器未能找到对应的外部脚本文件。排查步骤：

• 检查相对路径基准：相对路径是以当前 HTML 所在文件夹为基准计算的。例如 HTML 位于 /views/user/index.html，写 js/app.js 会请求 /views/user/js/app.js，若文件实际在项目根目录，需写成 ../../js/app.js 或 /js/app.js。
• 区分大小写：在 Windows 本地开发时文件名大小写不敏感，但部署到 Linux 服务器时严格区分大小写。确保 app.js 与 App.js 完全一致。

2. Cannot read properties of null (reading '...')

脚本试图获取 DOM 元素（如 document.getElementById('btn')），但返回了 null，随后调用属性报错。原因通常是普通脚本写在了 <head> 中，执行时按钮 DOM 节点根本还没有被解析出来。解决方法是将脚本标签加上 defer 属性，或者将脚本移至 </body> 之前。

3. 现代原生 ES 模块（type="module"）引入方式

在支持现代语法的浏览器中，可以直接使用原生的模块化机制。在 <script> 标签中增加 type="module" 属性：

<!-- 声明为 ES 模块：自动具备 defer 行为，且内部可以使用 import/export -->
<script type="module" src="js/index.js"></script>

设置 type="module" 后，该脚本不仅在内部支持 import { helper } from './utils.js'，还会默认开启类似 defer 的延迟加载行为，在后台下载并在 DOM 解析完成后才执行，同时每个模块天然拥有独立的局部作用域，避免污染全局 window 对象。

六、选型与配置决策总结

为了让网页既具备良好的首屏渲染速度，又保持工程代码的清晰可维护，可以参考下图所示的脚本引入决策流程：

综上所述，现代网页开发的通用实践原则可以归纳为：

1. 首选外部文件：除了极微量的首屏预置变量使用内联，其余逻辑一律写入独立的 .js 文件，以便充分利用浏览器本地缓存和 CDN 加速。
2. 放置于 <head> 搭配 defer：对于常规业务代码，通过 <script defer src="..."></script> 引入，既让浏览器更早发现资源并启动下载，又确保 DOM 构建完成后按序执行。
3. 无关联第三方工具使用 async：对于站点分析、错误监控、广告等不影响主业务的独立代码，使用 async 属性让其后台下载、就绪即跑，避免挤占关键渲染路径。