Web前端入门第 54 问：JavaScript 3 种书写位置及 script 标签的正确存放位置

前端开发 2025年05月20日09:36

JS 的代码并没有强制规定放在 HTML 中的某个位置，如果您有使用过开发者工具查看过网页源码，那么您会看到很多 JS 代码都以 .js 文件的形式存放，并且放在了 HTML 文件最后，也就是 </body> 结束标签之前。

但如果仔细观察，在 <head> 标签中，也会找到很多 script 标签引入的 JS 代码。

那么您是否好奇过他们都有哪些区别？？

3 种书写位置
与 CSS 一样，JS 的脚本算起来也有三种书写方式，分别为行间 JS 代码、内联脚本、外部脚本。

1、事件处理

直接在 HTML 元素的事件属性中写代码，此方式一般多用于编写 demo 测试程序，正常的项目开发不推荐这种写法。

原因：onclick 中的方法名必须全局声明，导致污染全局变量，并且混合了 HTML 结构和 JS 事件行为代码，不利于项目维护。

<a href="javascript:alert('Hello World!')">点击我</a>
2、内联脚本

<script src="utils.js"></script>

<script src="common.js"></script>

<script src="index.js"></script>
模块化引入方式：

import { a } from './utils.js';
import { b } from './common.js';
a();
b();

document.querySelect('#button').addEventListener("click", async () => {
// 按需加载模块
const module = await import("./test-module.js"); // test-module.js 中导出 run 方法
module.run();
console.log('Hello World!');
});
script 标签属性
script 标签除了常见的 type 和 src 外，还有两个控制脚本异步加载的属性，分别为 async 和 defer，区别如下：

1、无 async/defer
HTML 解析 → 遇到 <script> → 停止解析 → 下载脚本 → 执行脚本 → 继续解析 HTML
2、async
HTML 解析（并行下载脚本） → 脚本下载完成 → 立即执行（可能中断 HTML 解析）
有多个 async 无法保证执行顺序，谁先下载完、谁先执行，所以 async 不适合于依赖顺序的脚本。脚本执行可能发生在 DOMContentLoaded 事件之前或之后，取决于下载速度。

<script async src="script1.js"></script>
<script async src="script2.js"></script>
应用场景：脚本完全独立，不依赖其他脚本或 DOM，比如：统计代码、广告代码等。

3、defer
HTML 解析（并行下载脚本） → HTML 解析完成 → 按顺序执行所有 `defer` 脚本
多个 defer 脚本严格按文档顺序执行，无论下载速度。所有 defer 脚本执行完毕后，才会触发 DOMContentLoaded 事件。

<script defer src="script1.js"></script>
<script defer src="script2.js"></script>
应用场景：脚本需要访问完整的 DOM 或依赖其他脚本，比如：页面初始化逻辑。

script 标签位置
首先要明白，存放在 head 中的 script 标签，会阻塞页面加载，如果这个文件超大，那么页面白屏时间就会很长。

如果是内联脚本，放在哪儿其实影响不大，主要看其内容中有没有耗时的操作。

如果您的脚本需要尽早执行，那么建议放在 head 中。比如：vconsole调试工具，尽早加载有利于捕获代码错误。

如果您的脚本需要访问完整的 DOM，那么建议放在 body 的最后，这样可以确保 DOM 已解析完成。

虽然可以使用 defer 控制脚本延迟加载，但某些兼容原因，还是建议 JS 脚本后置兼容旧版本浏览器。

写在最后
JS 代码应该首先考虑放在外部文件中，HTML 结构应该永远保持简洁。

除非您真的有需求，才建议将 JS 代码放在 head 中，否则 JS 代码应该永远放在 </body> 结束标签之前。