HTML引入JS时script标签放head还是body末尾？最佳实践解析

在编写 HTML 页面时，引入 JavaScript 脚本的传统通用建议是“将 <script> 放在 <body> 标签的最末尾”，但现代前端开发规范中，更推荐的做法是“将脚本放在 <head> 中并添加 defer 属性”。这两种做法的核心目的都是为了避免脚本下载和执行阻断 DOM 树构建，从而避免页面白屏与找不到 DOM 节点的报错，而现代规范在加载性能和语义维护上更胜一筹。

为什么位置会产生差异：浏览器的渲染机制

要彻底明白标签放置位置的影响，必须先理解浏览器解析 HTML 的底层原理。HTML 解析器从上到下按行构建 DOM（文档对象模型）。当解析器遇到普通的 <script src="..."></script> 标签时，会发生以下行为：

1. 解析暂停：浏览器立即停止对后续 HTML 字符的读取与 DOM 构建。
2. 网络下载：浏览器通过网络请求获取对应的 JS 文件。
3. 即时执行：JS 脚本一旦下载完成，JavaScript 引擎接管主线程并立即同步执行该脚本。
4. 恢复解析：直到脚本完全执行完毕，浏览器才恢复继续解析剩余的 HTML。

这种特性被称为解析阻断（Parser Blocking）。如果将普通脚本放在 <head> 内，在外部样式或脚本体积较大、网络较慢时，用户只能面对一个空白页面，同时脚本中若试图通过 document.getElementById() 获取尚未解析的页面元素，将会直接返回 null 并抛出运行时错误。

两种传统放置方式的区别与权衡

1. 放在 <head> 中的传统场景

在较旧的 HTML 规范中，若不借助异步属性直接将普通 <script> 放入 <head>，脚本中操作 DOM 的逻辑必须手动绑定在 DOM 加载事件之后：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>传统 head 引入</title>
  <script src="app.js"></script>
</head>
<body>
  <button id="submitBtn">提交</button>
</body>
</html>

对应在 app.js 中，开发者不得不编写事件监听：

// 必须等待 DOM 就绪，否则报错
document.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('submitBtn');
  btn.addEventListener('click', () => alert('点击成功'));
});

虽然事件监听能够解决“找不到 DOM”的问题，但它依然无法解决“下载 JS 阻断 HTML 渲染首屏”的性能损耗。

2. 放在 <body> 末尾的传统优势

为了解决首屏阻断，Web 开发领域形成了将普通 <script> 移动到 </body> 结束标签之前的实践规则：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>body末尾引入</title>
</head>
<body>
  <header>页面顶部导航</header>
  <main>页面主要内容区域</main>
  <button id="submitBtn">提交</button>

  <!-- 放在所有 DOM 元素之后 -->
  <script src="app.js"></script>
</body>
</html>

优势分析：

• 页面优先渲染：浏览器在解析到 <script> 时，上方的主体 HTML 和 CSS 已经解析完成，DOM 树基本构建完毕，用户能第一时间看到页面内容。
• 天然安全访问 DOM：submitBtn 已经先于脚本被解析，app.js 可以直接获取该按钮节点，无需额外包裹 DOMContentLoaded 事件。

依然存在的局限：将脚本放在末尾时，浏览器直到解析完全部 HTML 才会发起该脚本的网络请求。对于体积较大的 JS 应用，这会推迟脚本的下载时机，导致页面虽然显示出来，但在脚本下载完成前按钮无法点击（可交互时间 TTI 滞后）。

现代标准方案：defer 与 async 属性解析

HTML5 引入了两个关键布尔属性：defer（推迟）与 async（异步）。有了这两个属性，开发者可以将所有外部资源统一定义在 <head> 中，既兼顾了 HTML 结构规范，又彻底解耦了“资源下载”与“DOM 构建”。

1. defer 属性（推迟执行）

<head>
  <script src="app.js" defer></script>
</head>

• 并行下载：浏览器遇到 defer 脚本时，会在后台异步发起网络请求下载该文件，期间 HTML 继续正常解析，不阻塞页面渲染。
• 等待解析完成执行：即便脚本提前下载完成，浏览器也不会立即执行它，而是静默等待直到整个 HTML 完全解析构建出 DOM 树之后、DOMContentLoaded 事件触发之前执行。
• 保证执行顺序：如果页面中引入了多个带有 defer 的脚本（例如先 lib.js 后 main.js），浏览器严格按照它们在 HTML 中的书写次序依次执行。

2. async 属性（异步执行）

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

• 并行下载：同样在后台异步下载脚本，不会阻塞 HTML 的解析。
• 就绪即执行（执行时阻断）：一旦脚本文件下载完成，无论此时 HTML 解析到了哪里，浏览器都会暂停当前的 HTML 解析，立即执行该脚本；执行完毕后再恢复解析。
• 无法保证执行顺序：多个 async 脚本按“谁先下载完成谁先执行”的规则运行，后声明但体积较小的脚本可能先于前面的大文件执行。

工程实践中的选型决策树

在实际生产开发中，应根据脚本的业务属性、依赖关系以及环境需求选择最合理的引入策略。以下是选择引入方式的标准决策流程：

最佳实践与规范建议

现代标准的 HTML 模板写法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>规范结构示例</title>

  <!-- 样式优先加载 -->
  <link rel="stylesheet" href="style.css">

  <!-- 1. 独立统计埋点：使用 async 并行下载，就绪即跑 -->
  <script src="https://cdn.example.com/tracker.js" async></script>

  <!-- 2. 基础依赖库与业务主脚本：使用 defer 保证加载不阻断且按序执行 -->
  <script src="vendor.js" defer></script>
  <script src="main.js" defer></script>
</head>
<body>
  <div id="app">
    <h1>页面正文内容</h1>
    <button id="actionBtn">操作按钮</button>
  </div>
</body>
</html>

开发注意事项与常见陷阱

• 内联脚本无效：defer 和 async 属性只对带有 src 属性的外部脚本生效。直接在标签内部写代码的内联 <script> 会自动忽略这两个属性。如果需要在内联脚本中安全访问 DOM，仍需监听 DOMContentLoaded。
• ES 模块的默认行为：当使用现代 ES 模块语法 <script type="module" src="app.js"></script> 时，浏览器默认自带 defer 行为，即使不显式书写 defer，模块也会在后台下载并在 DOM 构建完成后按序执行。
• 避免滥用 async：如果 main.js 依赖 vendor.js，绝不能对两者使用 async，否则当 main.js 网络体积较小提前下载完毕时，会因为找不到 vendor.js 抛出致命错误。