script 放在 head 和 body 有什么区别？

核心区别不是“标签位置本身”，而是脚本是否阻塞 HTML 解析、脚本执行时 DOM 是否已经就绪。

放在 <head> 中

如果是普通外部脚本：

• 浏览器解析到 <script> 时会暂停 HTML 解析。
• 需要先下载并执行脚本，再继续往后解析文档。
• 如果脚本依赖页面中的后续 DOM，容易遇到元素尚未解析完成的问题。

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

放在 <body> 底部

常见目的有两个：

• 让主要 HTML 内容先被解析和渲染。
• 让脚本执行时，页面主体 DOM 基本已经就绪。

<body>
  <!-- 页面内容 -->
  <script src="/main.js"></script>
</body>

现代常见做法

现代项目更常见的做法是把脚本放在 <head>，但配合 defer 或 type="module"：

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

这样既不会像普通脚本那样阻塞 HTML 解析，也不必依赖“必须放在 body 底部”。

结论

• 普通脚本放在 <head>：更容易阻塞解析。
• 普通脚本放在 <body> 底部：更利于页面先完成结构解析。
• 使用 defer 或 type="module" 后，脚本放在 <head> 通常也没有问题。
• 真正该关注的是脚本加载策略，而不是只盯着 head / body 位置。