JavaScript在<head>与<body>中的差异及优化策略
2025/3/5
介绍JavaScript放在<head>和<body>中的加载、执行时机及对页面渲染的影响，还阐述了async和defer属性的作用及最佳实践。
将 JavaScript 放在 <head> 和 <body> 中，主要区别在于脚本的加载和执行时机，以及对页面渲染的影响。以下是详细的对比：
1. 放在 <head> 中
- 加载时机：浏览器在解析 HTML 时，遇到
<head>中的<script>标签会立即加载并执行脚本。 - 执行时机：脚本会在 DOM 解析完成之前执行。
- 对页面渲染的影响：
- 如果脚本是同步加载（没有
async或defer属性），浏览器会阻塞 DOM 解析和渲染，直到脚本加载并执行完成。 - 这可能导致页面加载时间变长，用户体验变差（尤其是脚本较大或网络较慢时）。
- 如果脚本是同步加载（没有
- 适用场景：
- 需要在页面渲染之前执行的脚本（如某些初始化逻辑）。
- 使用
async或defer属性来优化加载行为。
2. 放在 <body> 末尾（推荐做法）
- 加载时机：浏览器会先解析并渲染页面的 DOM 内容，最后加载并执行脚本。
- 执行时机：脚本会在 DOM 解析完成之后执行。
- 对页面渲染的影响：
- 页面内容可以更快地显示给用户，因为脚本不会阻塞 DOM 解析和渲染。
- 用户体验更好，尤其是对于内容较多的页面。
- 适用场景：
- 大多数情况下推荐将脚本放在
<body>末尾，尤其是对页面渲染没有依赖的脚本。 - 如果需要操作 DOM 元素，确保 DOM 已经加载完成。
- 大多数情况下推荐将脚本放在
3. 使用 async 和 defer 属性
async：- 脚本异步加载，加载完成后立即执行。
- 不保证执行顺序，适合独立的脚本（如统计代码）。
defer：- 脚本异步加载，但会等到 DOM 解析完成后按顺序执行。
- 适合有依赖关系的脚本。
4. 最佳实践
- 将脚本放在
<body>末尾：这是最常见的做法，可以避免阻塞页面渲染。 - 使用
defer：如果脚本需要放在<head>中，使用defer属性可以避免阻塞渲染。 - 避免同步加载：除非有特殊需求，尽量避免同步加载脚本。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<!-- 使用 defer 避免阻塞渲染 -->
<script src="script1.js" defer></script>
</head>
<body>
<h1>Hello, World!</h1>
<!-- 将脚本放在 body 末尾 -->
<script src="script2.js"></script>
</body>
</html>
总结：将 JavaScript 放在 <body> 末尾是最佳实践，可以优化页面加载性能。如果必须放在 <head> 中，使用 defer 或 async 属性来避免阻塞渲染。
标签：面试题
上次更新：