HTML中怎么引入jquery.js？script标签位置与加载顺序详解

图 0：jQuery 引入方式、加载属性与执行顺序全局脉络图

一、HTML 引入 jquery.js 的两种核心路径

要在 HTML 文档中调用 jQuery 的 API，首先必须通过 <script> 标签将脚本文件下载并解析到当前页面的 JavaScript 运行时环境中。实际开发中有两种常用途径：本地文件引入与网络公共 CDN（内容分发网络）引入。

1. 本地文件引入

本地引入是指将官方下载的 jquery.js（未压缩的开发版，便于调试阅读）或 jquery.min.js（去除了注释与多余空白的生产压缩版）保存在网站项目的静态资源目录中（如 /js/），然后使用相对路径或绝对路径进行引用。

<!-- 示例：从当前站点的 js 目录下引入压缩版 jQuery -->
<script src="js/jquery-3.7.1.min.js"></script>

<!-- 紧随其后编写或引入依赖 jQuery 的业务代码 -->
<script>
  $(function() {
    console.log("本地 jQuery 引入并执行成功，当前版本：" + $.fn.jquery);
  });
</script>

本地引入的最大优势是确定性与独立性。项目不依赖外部网络连接，即使用户在内网隔离环境或外部 CDN 服务发生故障，页面功能依然完全正常。

2. CDN（内容分发网络）引入

CDN 引入是指直接指向第三方公共镜像服务器（如 BootCDN、jsDelivr、cdnjs 或官方 CDN）。浏览器会就近从地理位置最近的缓存节点拉取该文件，减少自有服务器的带宽占用，并利用高并发节点提升加载速度。

<!-- 示例：使用 jsDelivr 公共 CDN 引入 jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

3. 生产级最佳实践：CDN + 本地容灾回退

通过短小的 JavaScript 检测语句，当 CDN 加载失败（即 window.jQuery 未被定义）时，立刻动态向页面写入本地备用脚本：

<!-- 1. 优先尝试从 CDN 加载 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

<!-- 2. 检查全局对象，若 CDN 失败则降级加载本地文件 -->
<script>
  window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>');
</script>

<!-- 3. 无论哪种途径成功，此处都可以安全使用 $ -->
<script src="js/main.js"></script>

图 1：本地存储与 CDN 容灾降级机制对比

二、script 标签的位置：放在 <head> 还是 <body> 底部？

很多初学者在编写 HTML 时，会把所有脚本习惯性地塞在 <head> 标签内。虽然浏览器允许这样做，但不同位置会显著改变浏览器的文档对象模型（DOM）构建与首屏绘制速度。

1. 放在 <head> 内部的现象与问题

当浏览器的 HTML 解析器遇到位于 <head> 内的普通 <script src="jquery.js"> 时，会发生以下行为：

• 立即停止解析 HTML：此时 <body> 标签甚至尚未被解析，屏幕上没有任何可见内容。
• 触发网络下载并执行：解析器必须等待 jquery.js 下载完毕并完整编译执行后，才会继续向下解析 <body> 标签。
• 首屏白屏时间变长：在弱网环境下，用户面对的是一片空白页面，影响第一感觉与首屏核心指标（FCP / LCP）。
• 无法直接选取 DOM 节点：如果紧接着在 <head> 内部写了 $('#btn').click(...)，由于此时按钮节点还没在 DOM 树中生成，会直接找不到节点或抛出异常（除非包裹了 ready 事件）。

2. 放在 <body> 结束标签前的优势

传统前端工程最经典的推荐模式是：将脚本置于 </body> 标签闭合前的一刻。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>示例页面</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- 页面主体内容：优先被浏览器解析并直接呈现在用户屏幕上 -->
  <div class="header">欢迎访问</div>
  <button id="submit-btn">提交</button>

  <!-- 1. 先引入 jQuery 依赖库 -->
  <script src="js/jquery.min.js"></script>
  <!-- 2. 再引入依赖该库的业务脚本 -->
  <script src="js/app.js"></script>
</body>
</html>

这种做法带来了双重好处：

1. 页面渐进式渲染：浏览器先走完所有的 HTML 文本并把骨架渲染到屏幕上，文字、图片容器迅速出现，白屏感消失。
2. DOM 节点天然存在：在后面的 app.js 中直接执行 document.getElementById('submit-btn') 或 $('#submit-btn')，目标节点已经位于 DOM 树中，避免因节点未挂载引发的逻辑失效。

图 2：<head> 与 <body> 底部放置模式下的渲染阻塞对比

三、加载属性与顺序：默认同步、defer 与 async 的本质区别

现代 HTML5 为 <script> 标签提供了 defer 和 async 两个布尔属性。如果希望将脚本写在 <head> 中，同时又不想阻塞文档解析，必须透彻理解它们的加载顺序与依赖规则。

1. 默认同步加载（无属性）

语法形如：<script src="jquery.js"></script>。加载完全服从从上到下的书写次序。遇到即下载，下载即执行，期间 DOM 构建全线挂起。依赖 jQuery 的后续脚本只要紧跟在它下方，就能确保 100% 访问到 $ 对象。

2. defer（延迟执行）—— 现代项目中推荐在 <head> 搭配使用的利器

语法形如：<script defer src="jquery.js"></script>。

• 并行异步下载：浏览器遇到 defer 标签时，会在后台网络线程中下载该脚本，同时继续解析 HTML，不会产生卡顿或白屏。
• 保序执行：所有标记为 defer 的外部脚本，浏览器会严格按照它们在 HTML 中出现的先后顺序执行。
• 在 DOM 构建完成后执行：defer 脚本的执行时机精确落在 HTML 完全解析完毕之后、DOMContentLoaded 事件触发之前。

<!-- 现代标准写法：放在 head 内且不阻塞首屏渲染 -->
<head>
  <meta charset="UTF-8">
  <title>Defer 规范示例</title>
  <!-- 1. 率先下载并保持第一执行顺序 -->
  <script defer src="js/jquery.min.js"></script>
  <!-- 2. 后台并行下载，但一定等待 jQuery 执行完毕后才会执行 -->
  <script defer src="js/my-plugin.js"></script>
  <script defer src="js/app.js"></script>
</head>

3. async（异步执行）—— 切忌对 jQuery 及其依赖链使用！

语法形如：<script async src="jquery.js"></script>。

async 同样是后台下载，但它的核心特性是“谁先下载完，谁就立刻执行”。它完全不管脚本在文档中的先后次序：

• 如果 jquery.js 体积稍大（如 80KB），而你的业务脚本 main.js 很小（如 3KB）；
• 两者同时发起请求，main.js 极有可能先下载完成；
• 一旦 main.js 先执行，调用 $('#box') 时 jQuery 尚在网络传输中，控制台就会必然报出：Uncaught ReferenceError: $ is not defined。

因此，async 仅适用于完全独立、不依赖任何外部变量、也不被任何其他脚本依赖的纯工具类脚本（例如百度统计、Google Analytics、广告投放埋点等），绝不能用于像 jQuery 这样的核心基础库。

图 3：三种 script 加载属性在时间轴上的并行与抢占特性

四、时序避坑：为什么会出现“$ is not defined”？

在日常开发与排错中，关于 jQuery 最频繁出现的异常莫过于 Uncaught ReferenceError: $ is not defined 或 jQuery is not defined。产生这个报错的根本原因只有一条：代码执行到使用了 $ 的位置时，全局作用域中根本不存在这个标识符。以下是排查与解决的几个固定切入点：

1. 书写顺序颠倒（最常见）

浏览器执行 JavaScript 是严格按照上下文流向进行的。如果业务脚本排在 jQuery 标签之前，业务代码执行时自然找不到 $。

<!-- 错误示例：业务逻辑写在了引入库的前面 -->
<script>
  $('#title').text('Hello'); // 此时抛出 ReferenceError: $ is not defined
</script>
<script src="js/jquery.min.js"></script>

解决办法：永远将基础库（jQuery）的 <script> 声明置于任何依赖它的业务代码或插件代码（如 Bootstrap JS、jQuery UI 等）的上方。

2. 静态路径错误导致 404

在 HTML 文件的 src 中指定的路径与实际物理路径不一致（例如大小写不匹配、相对层级少写了 ../、或者在子路由页面直接写了没有绝对前缀的相对路径）。在浏览器开发者工具（F12）的 Console 中会先看到一个 404 Not Found 的资源错误，紧随其后便是业务代码的 $ is not defined。

解决办法：打开 Network 标签页筛选 JS 请求，查看 jquery.js 的 HTTP 状态码是否为 200。确认路径拼写及部署后的文件是否存在。

3. DOM 准备就绪的误区：$(document).ready()

有些开发者认为，只要把代码写在 $(document).ready() 内部，就可以随便放在页面的任何位置。这是一个逻辑误解：

• $(document).ready()（简写为 $(function(){...})）能够解决的是“DOM 节点尚未渲染完毕，直接去获取节点拿不到”的问题。
• 但它不能解决 jQuery 自身尚未加载的问题。因为要调用 $(document)，前提必须是 $ 这个函数本身已经被成功定义。如果 $ 尚未挂载，调用 $() 在语法执行阶段就会直接报错崩溃。

图 4：“$ is not defined” 常见四级排查链路与应对方式

五、规范总结与工程化模板

为了让不同场景下的引入方式清晰明了，我们可以将常见的引入策略与适用场景总结为下表：

工业级标准引入模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生产环境引入规范</title>
  
  <!-- 样式表放在 head 内，避免样式突变闪烁 -->
  <link rel="stylesheet" href="css/style.css">

  <!-- 方式一：现代 defer 模式（置于 head，不卡首屏，有序执行） -->
  <!--
  <script defer src="js/jquery.min.js"></script>
  <script defer src="js/main.js"></script>
  -->
</head>
<body>

  <!-- 页面内容结构 -->
  <div id="app">
    <h1>内容区域</h1>
  </div>

  <!-- 方式二：经典 body 底部模式（兼容性最佳，自然无阻塞） -->
  <!-- 1. 优先引入 jQuery 核心库 -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
  <!-- 2. CDN 降级兜底方案 -->
  <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>');</script>
  <!-- 3. 依赖库的第三方插件 -->
  <script src="js/jquery.cookie.min.js"></script>
  <!-- 4. 自身的业务逻辑脚本 -->
  <script src="js/main.js"></script>

</body>
</html>

遵循上述规则，即可确保 jQuery 在任何网络环境与浏览器中均能平稳装载，既杜绝首屏白屏问题，也从根源上消除了脚本执行时的依赖丢失风险。