body标签是html文档中不可省略的主体容器，所有用户可见内容必须且只能置于其内；浏览器从解析body开始渲染视口内容，其内部脚本默认同步阻塞dom构建，影响首屏性能。
body 标签不是可选容器，而是 HTML 渲染链上不可跳过的起点：浏览器解析到 开始才真正往视口里“画内容”，所有用户可见元素必须且只能出现在它内部。
为什么 body 里放脚本会阻塞首屏渲染
浏览器是顺序解析 HTML 的。如果在 开头或中间写了 <script src="xxx.js"></script>，解析器会暂停 DOM 构建，去下载、执行 JS，等它完成才能继续往下解析后续 HTML —— 这意味着后面的 <h1></h1>、<p></p>、图片都得干等。
- 除非显式加
async或defer属性，否则内联脚本和外部脚本默认都是同步阻塞的 -
defer适合依赖 DOM 的初始化逻辑（如document.body.innerHTML = ...），它会等 HTML 解析完再执行，且按书写顺序 -
async适合完全独立的脚本（如埋点、广告），不保证执行顺序，也不等 DOM 就绪 - 现代实践倾向把关键 JS 放
用defer，非关键 JS 放底部或用async
body 内容为空时页面为何仍显示白屏
即使 是合法结构，浏览器也会渲染一个空的、带默认 margin: 8px 的块级容器 —— 但用户看到的是“空白”，不是“加载中”。这常被误判为卡死，实际是内容没写进去，或 JS 动态注入失败。
- 检查是否漏写了
开始标签，或误写成（XHTML 风格，在 HTML5 中不合法） - 确认服务器返回的 HTML 确实包含预期内容，而不是后端模板渲染出错导致
body内为空字符串 - 用浏览器开发者工具的 Elements 面板直接看
document.body.innerHTML是否为空，比看 Network 响应更准 - 若内容靠 JS 注入，记得加上 loading 状态提示，否则白屏无反馈
用 CSS 控制 body 加载行为的边界在哪
CSS 本身不控制加载时机，但它能影响浏览器对“首屏内容就绪”的判定。比如给 body 设 background-image 不会延迟 DOM，但设 background: url(...) no-repeat 且图片体积大，可能拖慢 LCP（最大内容绘制）指标。
-
body { background-color: #fff; }是最安全的首屏优化 —— 颜色渲染极快，且能覆盖白屏期 - 避免在
body上用background-image指向未压缩的大图，尤其不要用 base64 编码的超长字符串 - 不要用
body::before或body::after插入关键内容，它们不属于 DOM，无法被搜索引擎索引，也无法被 JS 直接操作 -
body的visibility: hidden或opacity: 0会让内容不可见但仍在布局流中，LCP 仍会计算，不能替代真正的懒加载逻辑
真正影响 body 加载体验的，从来不是标签本身，而是你往里面塞了什么、怎么塞、塞多早。最容易被忽略的一点：哪怕只有一行 <script>console.log(document.body)</script> 放在 开头，也足以让首屏渲染推迟几十毫秒 —— 而这不是 bug，是规范规定的解析行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
