script放在head和body底部的区别这是一个经典但依然非常重要的前端问题核心在于浏览器如何解析 HTML、加载资源、执行 JavaScript以及这如何影响页面渲染和白屏时间。下面从现象 → 原理 → 现代解决方案 → 实战建议​ 系统说明。一、先给结论速览版放置位置主要特点影响head很早加载✅ 早下载❌ 阻塞 HTML 解析和渲染body底部很晚执行✅ 不阻塞首屏渲染❌ 执行较晚一句话总结​head里放脚本 快下载、慢显示body底部放脚本 慢执行、快显示二、浏览器解析 HTML 的核心规则✅ 浏览器是“边下载边解析”的从上到下解析 HTML遇到 CSS → 下载但不阻塞 HTML 解析但会阻塞渲染遇到script→立刻停止 HTML 解析下载并执行 JS执行完再继续解析 HTMLscript是阻塞型资源三、放在head里会发生什么head script srcapp.js/script /head body div idapp/div /body执行流程HTML 解析 ↓ 遇到 script ↓ 停止解析 HTML ↓ 下载 app.js ↓ 执行 app.js ↓ 继续解析 body ↓ 渲染页面❌ 问题白屏时间长用户看到页面的时间被推迟JS 无法操作还没解析出来的 DOMdocument.getElementById(app); // null四、放在body底部会发生什么body div idapp/div script srcapp.js/script /body执行流程解析 HTML ↓ 渲染页面结构 ↓ 下载并执行 JS✅ 优点页面更快可见DOM 已存在JS 可直接操作更好的用户体验❌ 缺点JS 执行较晚若 JS 负责关键交互用户可能“点了没反应”五、现代解决方案asyncdefer这是今天最重要的知识点。1️⃣async异步script srcapp.js async/script特点下载不阻塞 HTML 解析下载完成后立刻执行执行时阻塞 HTML 解析 适合独立脚本统计、监控不依赖 DOM 的脚本⚠️ 执行顺序不可控2️⃣defer延迟script srcapp.js defer/script特点下载不阻塞等到整个 HTML 解析完成再执行按书写顺序执行 最适合主应用脚本需要操作 DOM 的脚本✅现代最佳实践六、三种方式的直观对比类型下载执行时机是否阻塞解析执行顺序普通 script同步立即✅ 阻塞顺序async异步下载完立即✅ 执行时阻塞❌ 不保证defer异步DOMContentLoaded 前❌ 不阻塞✅ 顺序七、DOMContentLoaded 与 load 的关系HTML 解析完成 │ ├── DOMContentLoadeddefer 脚本在此前执行 │ ├── 图片等资源加载 │ └── load✅defer脚本在DOMContentLoaded前执行✅async脚本不确定何时执行八、Vue / React 项目的实际情况✅ 现代构建工具Vite / Webpackbody div idapp/div script typemodule src/src/main.js/script /bodytypemodule默认表现类似 defer自动拆分 chunk优先级调度✅ 不需要手动放到底部九、实战建议2025–2026✅ 推荐做法场景建议主应用 JSscript defer统计 / SDKscript async关键首屏逻辑内联 script尽量小不影响渲染的工具库head 中 async老项目无构建工具body 底部十、一句话总结**放在head会阻塞渲染放在body底部会让页面更快可见但在现代前端中正确使用defer/async比纠结位置更重要。**