body必须有且只能有一个，否则浏览器会静默丢弃多余body或将其内容合并至首个body，导致document.body为空、css选择器失效、元素错位；旧属性如bgcolor/onload已废弃，应改用css和domcontentloaded事件；脚本置于body开头会阻塞首屏渲染，推荐defer/async或移至前；空body显示白屏属正常行为，需确保内容及时注入并避免依赖body::before/after。
body 必须有且只能有一个，否则 DOM 会出错
浏览器解析 HTML 时，body 是 html 的第二个子元素，规范强制要求唯一。出现第二个 body 标签，浏览器不会报错，但会静默丢弃后续内容，或把多余标签及其子节点“塞进”第一个 body 里——结果就是：document.body 可能返回 null（实际是 fallback 空对象），body > .header 这类 CSS 选择器失效，甚至 .footer 被渲染到 head 里。
常见诱因包括：
- 模板拼接时重复写了
，比如 CMS 输出 + 手动嵌入片段 - 前端框架 SSR 渲染后又在客户端 mount 到
document.body，但没清空旧 DOM - 用
innerHTML直接写入含...的字符串（这会触发浏览器自动修复，结构不可控）
body 不再支持 bgcolor、onload 等旧属性
bgcolor、text、background、alink 等属性在 HTML5 中已被完全移除。写上去不会报错，但毫无效果。同理，onload 虽还能运行，但和现代生命周期冲突，比如 React/Vue 的 mounted 或 useEffect 可能抢在它之前执行。
正确替代方式：
- 背景色/字体：统一用 CSS，例如
body { background-color: #fff; color: #333; } - 初始化逻辑：改用
addEventListener('DOMContentLoaded', handler)，或确保脚本放在前 - 动态主题切换：操作
document.body.className或document.body.style.backgroundColor，别碰废弃属性
脚本放在 body 里会影响首屏渲染
浏览器顺序解析 HTML，遇到 <script></script> 就暂停 DOM 构建，去下载、执行 JS。哪怕只是 <script>console.log(document.body)</script> 放在 开头，也会推迟 <h1></h1>、图片等首屏内容的渲染。
优化建议：
- 关键 JS（如初始化 DOM 操作）放
里，加defer属性 - 非关键 JS（如统计、广告）放
前，或用async - 避免在
body开头写内联脚本，尤其不要依赖document.body却不检查是否就绪
body 为空时页面显示白屏不是 bug，而是预期行为
是合法结构，浏览器会渲染一个带默认 margin: 8px 的空块级容器——用户看到的就是白屏，不是加载失败。如果内容靠 JS 注入，又没加 loading 提示，就会让用户误以为卡死。
排查要点：
- 用浏览器开发者工具 Elements 面板确认
body内确实无子节点，比看 Network 更准 - 避免用
body::before或body::after插入关键内容（它们不属于 DOM，SEO 和 JS 都不可见） - 给
body设background-color是最稳妥的首屏优化，比background-image更快
真正决定页面是否“可用”的，从来不是 body 标签本身，而是你往里面塞了什么、什么时候塞、怎么塞——尤其是那些看似无害的内联脚本和空标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
