扁平化HTML结构能显著降低内存占用和解析开销——每个冗余div节点占用1–2KB，深层嵌套加剧样式计算与事件监听成本，删减后DOM构建时间可降30–50ms，内存峰值下降1–2MB。
直接删掉那些没用的 <div> 嵌套，就能明显降低内存和解析开销——每个 DOM 节点至少占 1–2 KB，深层嵌套还会放大样式计算、事件监听器等间接成本。
为什么扁平化结构能省内存
浏览器解析 HTML 时，每个标签都会生成对应 DOM 节点，节点越多、嵌套越深，内存占用和样式计算压力就越大。尤其在低端设备或长列表页，DOM 节点数超 1500 就可能触发 GC 频繁回收，造成卡顿。
-
<div><div><div><p>文本</p></div></div></div>和<p>文本</p>渲染效果一样，但前者多出 3 个节点、约 4–6 KB 内存 - Vue/React 的
<div id="app">若无样式、事件绑定、ref 引用，可改用<Fragment>或直接移除 - 语义化标签（如
<header>、<nav>）本身不增开销，反而减少重置 CSS 和 JS 查询成本
怎么识别并清理冗余嵌套
不是所有 <div> 都该删，关键是判断它有没有承担布局、样式、交互或语义职责。工具能辅助，但最终靠人工确认。
- 用 Chrome DevTools 的 Elements 面板展开 DOM 树，找连续出现的、无 class/id/style/事件绑定的
<div> - 检查是否仅用于“撑开间距”或“包裹 flex/grid 容器”——这些通常可用 margin/padding 或直接设父元素 display 替代
- 警惕 CMS 或低代码平台自动生成的结构，例如：
<div class="wrapper"><div class="container"><div class="row"><div class="col">…</div></div></div></div>，多数只需保留最内层 - 用
document.querySelectorAll('div:not([class]):not([id]):not([style]):not([onclick])')快速定位纯容器 div（注意：仅用于调试，勿上线运行）
语义化替代带来的实际收益
用对标签不只是为了 SEO 或无障碍，它直接影响浏览器构建渲染树的效率。比如 <main> 比 <div role="main"> 少一次 ARIA 属性解析，且更易被 CSSOM 复用样式规则。
立即学习“前端免费学习笔记（深入）”；
-
<article>自带隐式 margin 和流式行为，比<div class="article">少 1–2 行 reset CSS -
<picture>+<source>比 JS 动态换图节省主线程执行时间，且支持原生 preload - 避免用
<table>布局——它的 layout 算法复杂度远高于 flex/grid，解析耗时高 3–5 倍 - 慎用
<iframe>：每个 iframe 都是独立上下文，至少多占 2–3 MB 内存，且无法共享缓存
压缩空格和注释真不如删节点有效
删掉 5 KB 注释和空格，可能让首字节快 10 ms；删掉 20 个冗余 <div>，却能让 DOM 构建时间降 30–50 ms，内存峰值下降 1–2 MB。后者才是瓶颈所在。
- HTML 压缩工具（如 html-minifier）应在构建阶段启用，但它不能识别逻辑冗余，只处理格式
- 不要为“代码可读性”在生产环境保留嵌套结构——那是开发阶段的事，上线前必须扁平化
- 团队协作中，用 ESLint 插件（如 eslint-plugin-html）或自定义 Prettier 规则，在提交前拦截典型冗余模式
- 动态渲染场景（如 SSR/SSG），优先在模板层做结构精简，而不是靠客户端 JS 后续 patch
真正卡顿的从来不是传输速度，而是浏览器解析、构建、布局那一瞬间。删一个没用的 <div>，比调一次 requestIdleCallback 更直接有效——只是这事没人盯着做，容易被忽略。
