父容器高度为0但子元素仍在页面上，是因为HTML结构不合法导致浏览器自动修正DOM：如p标签内不能包含div，浏览器会提前闭合p标签，使后续div脱离父容器。
为什么父容器高度为0，但子元素还在页面上？
这不是CSS没写对，是HTML结构本身被浏览器悄悄改写了。比如你写了 <div class="wrapper"><p>文字</p><div>块内容</div></div>，但 <p> 不能合法包含 <div>，浏览器解析时会立刻关闭 <p>，把后面的 <div> 推到外面去——实际DOM变成两个独立节点：<div class="wrapper"><p>文字</p></div> 和 <div>块内容</div>。wrapper根本没包住它。
- 用 DevTools 右键父容器 → “Edit as HTML”，删一个字符再回车：如果子结构整体跳出去，说明原始HTML已被修正
- 在 Console 运行
document.body.innerHTML，和源码逐行比对，多出的</p>、消失的<section>都是线索 - W3C Validator 会直接报错：
Element div not allowed as child of element p，这类必须优先修复
script 放 head 里，首屏就卡住？
浏览器遇到未加修饰的 <script src="app.js"></script>，会立刻暂停 HTML 解析，下载并执行脚本后才继续。首屏白屏、DOMContentLoaded 延迟，往往就卡在这儿。
- 非关键 JS 一律放
</body>前，不加async或defer也比放<head>强 - 必须在
<head>加的脚本（如监控 SDK），强制加defer；若无执行顺序依赖，优先用async -
async不保证执行顺序，defer按出现顺序执行，且只对外链有效；内联脚本（<script>console.log()</script>）默认同步阻塞，除非极简且必要，否则别写
语义化标签一换，样式全没了？
<div class="header"> 换成 <header> 后样式失效，不是浏览器不兼容，是你写的 CSS 还是 .header，压根没命中新标签。
- 现象：
<header>显示为 inline、宽度塌陷、margin 不生效——实际是“无样式”，回退到浏览器默认值 - 修正方式：写
header { height: 60px; }，或渐进迁移：header, .header { height: 60px; } - 特别注意浮动清除：
<div class="clearfix">规则不会作用于<main>，得加main { display: flow-root; }或显式保留class="clearfix"
嵌套太深、div 套 div，性能真会变差？
删掉注释和空格只能省几 KB，但删掉一层没意义的 <div class="wrapper"> 嵌套，可能让 DOM 节点数减少 10%，直接影响解析和布局耗时。
立即学习“前端免费学习笔记（深入）”；
- 单个容器子元素建议控制在 50 以内，超了容易触发重排瓶颈
- 嵌套层级超过三层，CSS 选择器易变复杂，JS 查询也更慢（比如
document.querySelector('div div div div')） -
<ul>里直接塞<div>，不仅语义错，还会让li的专属样式（如list-style）完全失效 - 动态内容别一股脑 append 到一个父节点，用
DocumentFragment分批插入，减少 layout thrashing
真正拖慢页面的，往往不是某一行 JS，而是你写的第一个 <div> 就没嵌对位置。
