Wepress

Appearance

JS 代码放在 head 里和放在 body 里有什么区别？ ​

参考答案： ​

JavaScript 脚本文件（JS）放置在 <head> 和 <body> 的位置会对页面的加载和性能产生不同的影响，主要区别在于 加载顺序 和 页面渲染。

1. JS 放在 <head> ​

特点： ​

  • 优先加载脚本：
    浏览器在解析 HTML 时会先加载和执行 <head> 中的脚本文件，然后再继续解析和渲染后续的 HTML 文档。
  • 可能阻塞页面渲染：
    如果脚本文件加载时间较长，可能会阻塞页面的解析，导致页面内容迟迟不能显示（Render Blocking）。

适用场景： ​

  • 必须先加载的脚本：
    如页面需要依赖的基础框架、全局配置、CSS 处理脚本（如动态生成 CSS）、Polyfill 等。
  • 必须立即执行的逻辑：
    如初始化代码（页面需要立刻依赖某些 JS 才能正常渲染）。

2. JS 放在 <body> 末尾 ​

特点： ​

  • 优先渲染页面内容：
    浏览器会优先解析和渲染 HTML 和 CSS，然后再加载和执行 <body> 末尾的脚本。
  • 避免阻塞渲染：
    将脚本放在文档的末尾，页面可以更快地显示内容，改善用户体验。

适用场景： ​

  • 脚本依赖 DOM：
    脚本执行时需要操作页面的 DOM 元素，确保 DOM 已被完全解析。
  • 非关键脚本：
    如统计工具、交互特效等非页面初始渲染所必须的脚本。

3. 使用 <script> 的属性调整加载方式 ​

如果希望控制脚本加载的顺序和方式，可以结合以下属性：

1. defer ​

  • 延迟执行脚本：
    脚本会在 HTML 解析完成后才执行，但多个带 defer 的脚本会按照它们在页面中的顺序依次执行。
  • 推荐放在 <head> 中：
    适合需要在 DOM 完全解析后运行的脚本。

示例： ​

html
<head>
  <script src="script.js" defer></script>
</head>

2. async ​

  • 异步加载脚本：
    脚本会与 HTML 同时加载，加载完成后立即执行（不保证顺序）。
  • 适用于独立脚本：
    如广告或统计脚本，不依赖其他资源或顺序。

示例： ​

html
<head>
  <script src="script.js" async></script>
</head>

对比总结 ​

放置位置优点缺点适用场景
<head>优先加载关键脚本，确保全局依赖可用可能阻塞页面渲染，影响首屏性能核心依赖、Polyfill
<body> 末尾避免阻塞渲染，用户体验更好脚本加载延迟，需等待 DOM 解析完成DOM 操作脚本、非核心功能
defer避免阻塞渲染，且脚本按顺序执行仅支持外部脚本DOM 依赖脚本、顺序执行的脚本
async加载速度最快，不阻塞渲染脚本执行顺序不确定，可能导致依赖错误独立脚本（广告、分析工具等）

最佳实践 ​

  1. 优先保证首屏性能：

    • 将影响页面内容渲染的脚本放在 <head> 中，结合 defer。
    • 将非必要脚本放在 <body> 末尾，或者使用 async 加载。

  2. 分析依赖关系：

    • 如果脚本依赖 DOM 元素，确保脚本在 DOM 加载完成后再执行。
    • 如果脚本依赖其他脚本，使用 defer 确保执行顺序。

  3. 结合工具优化：

    • 使用工具（如 Webpack 或 Vite）拆分脚本，按需加载，减少首次加载体积。

通过合理规划脚本的位置和加载方式，可以在确保功能的同时优化页面性能和用户体验。