JavaScript 代码的书写位置，3种JavaScript代码书写位置及其特点

最新推荐文章于 2025-08-05 15:28:01 发布

前端页面仔

最新推荐文章于 2025-08-05 15:28:01 发布

阅读量614

点赞数 8

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/qq_44136882/article/details/149717619

JavaScript 代码可以写在多个位置，具体取决于你的使用场景和需求。以下是主要的代码书写位置及其特点：

1. HTML 文件内部

(1) 在 `<head>` 标签内

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 位置示例</title>
    <script>
        // 这里的 JavaScript 代码会在页面加载时立即执行
        console.log("head 中的脚本执行");
    </script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

特点：

代码会立即执行
可能会阻塞页面渲染
通常用于需要尽早执行的代码

(2) 在 `<body>` 标签内（推荐）

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 位置示例</title>
</head>
<body>
    <!-- 页面内容 -->
    
    <script>
        // 这里的 JavaScript 代码会在页面内容加载后执行
        console.log("body 中的脚本执行");
    </script>
</body>
</html>

特点：

代码在页面内容加载后执行
不会阻塞页面渲染
可以访问 DOM 元素

2. 外部 JavaScript 文件（最推荐）

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 位置示例</title>
    <!-- 在 head 中引入外部 JS（如果有必要） -->
    <script src="scripts/head-script.js" defer></script>
</head>
<body>
    <!-- 页面内容 -->
    
    <!-- 在 body 末尾引入外部 JS（推荐方式） -->
    <script src="scripts/main.js"></script>
</body>
</html>

外部文件示例 (main.js)：

// 这里是外部 JavaScript 文件的内容
console.log("外部脚本执行");
document.addEventListener("DOMContentLoaded", function() {
    console.log("DOM 已完全加载");
});

特点：

代码与 HTML 分离，易于维护
可以被浏览器缓存，提高性能
可以复用代码
使用 defer 或 async 属性控制加载行为

3. HTML 元素的事件属性（不推荐）

<button onclick="alert('按钮被点击')">点击我</button>
<a href="javascript:void(0)" onclick="myFunction()">链接</a>

特点：

直接将 JavaScript 代码写在 HTML 元素的事件属性中
不利于维护和代码复用
违反了关注点分离原则
现代开发中应避免使用

4. JavaScript URL（特殊用途）

<a href="javascript:alert('Hello')">点击执行JS</a>

特点：

主要用于书签工具和小型脚本
不适合常规开发

5. 现代模块化写法（ES6+）

<script type="module" src="modules/main.js"></script>

模块文件示例 (main.js)：

import { helperFunction } from './helpers.js';

console.log("模块脚本执行");
helperFunction();

特点：

支持 ES6 模块系统
可以使用 import 和 export
默认启用严格模式
有独立的作用域

最佳实践建议

优先使用外部 JavaScript 文件，将代码与 HTML 分离
将 <script> 标签放在 <body> 末尾，避免阻塞页面渲染
使用 defer 或 async 属性 控制脚本加载行为：
- defer：脚本异步加载，但在 DOM 解析完成后按顺序执行
- async：脚本异步加载，加载完成后立即执行（不保证顺序）
对于复杂应用，使用模块化开发（ES Modules）
避免使用内联事件处理程序（如 οnclick="..."）
使用 DOMContentLoaded 事件 确保代码在 DOM 准备好后执行

不同位置的执行时机

位置	执行时机	是否阻塞渲染	能否访问 DOM
`<head>` 中的脚本	立即执行	是	不一定（可能 DOM 未加载）
`<body>` 开头的脚本	立即执行	是	只能访问已加载的 DOM
`<body>` 末尾的脚本	立即执行	否	可以访问所有 DOM
外部脚本（无属性）	立即执行	是（如果放在头部）	取决于位置
外部脚本（defer）	DOM 解析后执行	否	可以访问所有 DOM
外部脚本（async）	加载完成后立即执行	否	取决于执行时机
模块脚本	异步执行	否	可以访问所有 DOM