JavaScript脚本放在head还是body中有什么区别

在一个常见的前端编写场景中，开发者在 HTML 页面中添加了一个点击按钮，随后在 <head> 标签中编写了一段脚本，尝试通过 document.getElementById('action-btn') 绑定点击事件。然而刷新浏览器后，控制台却抛出了错误：Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')。当将这段相同的 <script> 移动到 <body> 标签闭合前的最底部时，报错消失，代码立即恢复正常工作。

这个现象揭示了核心答案：将 JavaScript 脚本放在 <head> 还是 <body> 底部的根本区别，在于浏览器解析 HTML 文档的时序先后以及对 DOM 元素的访问就绪状态，这直接决定了页面加载时的首屏渲染速度和脚本操作 DOM 的成功率。

一、浏览器解析与执行机制的底层差异

要透彻理解两者的区别，首先需要了解浏览器处理网页的流程。浏览器加载 HTML 文档时，解析器自上而下逐行读取代码，并实时构建 DOM（文档对象模型）树。在传统的同步加载方式下，JavaScript 的执行具有排他性阻塞特性：

• 放置在 <head> 中：当解析器自上而下读取到 <head> 内的 <script> 标签时，会立即暂停 HTML 文档的构建工作。浏览器必须等待该脚本完成下载（如果是外链文件）并执行完毕，才会继续向下解析 <body>。在此阶段，<body> 中的所有 HTML 元素尚未被解析器读取，DOM 树上根本不存在对应节点。
• 放置在 <body> 底部：当脚本位于 </body> 闭合标签之前时，页面中的全部结构内容（标题、段落、按钮、表格等）已经全部被浏览器解析并绘制成初始骨架。此时执行脚本，DOM 节点已全部就绪，脚本能够立即访问和操作页面元素，且用户在此之前已经看到了页面内容。

二、关键维度的全面对比

为了帮助读者在不同开发需求下做出合理选择，我们将放置位置在几个关键维度上的具体表现整理如下：

对比维度	放置在 <head> 中（无 defer/async）	放置在 <body> 底部（</body> 前）
DOM 访问时机	不可直接操作页面元素，必须包裹监听事件	可以直接通过原生 API 或选择器查询和修改元素
首屏白屏时间	较长。脚本下载和解析会完全阻塞后续 HTML 渲染	短。页面骨架与样式优先呈现，用户视觉体验好
排查报错成本	初学者容易忽略时序问题，频繁遭遇 null 指针异常	时序符合直觉，代码随结构加载自然生效
典型适用内容	不依赖 DOM 的环境监测、字体适配、基础埋点 SDK	页面核心业务逻辑、事件监听器、动画交互

三、具体代码示例与正确写法

为了直观对比这两种位置的代码组织形式，我们通过一个实际的操作示例进行说明。

1. 错误示范：在 <head> 中直接操作 DOM

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>错误示范</title>
  <script>
    // 此时浏览器刚读到 head，body 中的元素尚未生成
    const submitBtn = document.getElementById('submit-btn');
    // submitBtn 值为 null，控制台将抛出 TypeError 异常
    submitBtn.addEventListener('click', function() {
      alert('提交成功');
    });
  </script>
</head>
<body>
  <button id="submit-btn">点击提交</button>
</body>
</html>

2. 传统写法：将脚本置于 <body> 闭合标签前

在早期的网页开发以及很多轻量级项目中，将脚本放在 </body> 之前是最自然、最稳妥的解决办法：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>标准 body 底部写法</title>
</head>
<body>
  <button id="submit-btn">点击提交</button>

  <!-- 放在 body 最底部：元素已经解析完毕 -->
  <script>
    const submitBtn = document.getElementById('submit-btn');
    submitBtn.addEventListener('click', function() {
      alert('提交成功');
    });
  </script>
</body>
</html>

3. 兼容写法：必须放在 <head> 时使用事件监听

如果由于某些架构限制，脚本必须以内联形式写在 <head> 内，开发者必须显式等待 DOM 树构建完成：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>head 内监听 DOM 就绪</title>
  <script>
    // 监听 DOMContentLoaded 事件，确保 DOM 节点解析完成后再绑定
    document.addEventListener('DOMContentLoaded', function() {
      const submitBtn = document.getElementById('submit-btn');
      submitBtn.addEventListener('click', function() {
        alert('提交成功');
      });
    });
  </script>
</head>
<body>
  <button id="submit-btn">点击提交</button>
</body>
</html>

四、现代前端的最佳实践：defer 与 async

尽管将脚本放置在 <body> 底部解决了 DOM 访问和首屏渲染问题，但它带来了一个微小的网络缺陷：浏览器必须等到解析完所有 HTML 内容后，才开始发现并下载底部的 .js 文件。如果脚本体积较大，用户虽然看到了界面，但交互功能的激活（JS 下载和解析）会被推迟。

为了兼顾“尽早发起网络下载”与“不阻塞页面渲染”，HTML5 规范为 <script> 标签引入了 defer 和 async 两个关键属性。它们改变了脚本的时序模型：

• <script src="app.js" defer>（推荐做法）： 将脚本写在 <head> 中，浏览器在解析 HTML 的同时会并行下载该脚本。当 HTML 解析全部完成且 DOM 树构建完毕后，脚本才会按照在页面中出现的顺序依次执行。这既让网络请求提前发起，又完全不阻塞页面渲染，同时天然支持直接访问 DOM。
• <script src="analytics.js" async>： 脚本同样在后台异步下载，但一旦下载完毕就会立刻暂停 HTML 解析并执行。因此它无法保证执行顺序，也不能保证执行时 DOM 已经构建完成，仅适用于完全独立无依赖的第三方统计或广告脚本。

五、实际选型决策指南

根据实际项目场景，可以按照以下决策路径来确定脚本的放置位置：

六、常见误区与注意事项

总结

回顾核心问题：“JavaScript 脚本放在 head 还是 body 中有什么区别？”

传统的普通同步脚本放在 <head> 会直接阻塞 HTML 解析，延长白屏时间且无法操作尚未生成的 DOM 元素；放在 <body> 底部则能优先保障界面渲染，并确保脚本能顺利访问所有页面元素。而在现代 Web 开发标准下，最佳的通用方案是将外链脚本配置为 <script src="..." defer> 置于 <head>，兼顾网络下载的提前发起与 DOM 构建的无阻塞完整性。