删一个无用标签可让首屏快200ms，因其减少DOM节点数、降低解析与布局开销；实测在低端安卓机上删除空壳div、超6层嵌套容器、CMS残留占位符等可提升帧率至58fps。
删一个无用 <div> 能让首屏快 200ms，但这不是线性叠加的效果——它取决于你删的是哪一层、在哪种设备上跑、是否触发了重排或选择器匹配降级。
<h3>哪些标签删了真能测出性能变化</h3>
<p>真正影响解析和渲染的，是那些增加 DOM 节点数、加深嵌套、又没绑定任何行为的标签。实测中，以下几类删掉后在低端安卓机上可观察到明显帧率提升（从 42fps → 58fps）：</p>
<ul><li>纯空壳 <code><div>：没 <code>class、没 id、没 data-*、没 JS 查询或事件绑定
<div>
<div><div><div><div><div></div></div></div></div></div>，尤其在外层没设 <code>display: flex 或 grid 时
<div data-id="123">、<code><div class="wrapper-2024">，但 DevTools 的 Styles 面板里搜不到对应 CSS 规则
<li>未闭合导致浏览器自动补全的结构：比如 <code><header><nav><ul>...</ul></nav></header>（<nav></nav> 没闭合），补全后破坏 grid-template-areas 布局，间接引发强制同步布局怎么验证删得对不对，而不是越删越崩
直接删标签可能让 document.querySelector('.item').offsetHeight 突然返回 0，或让 .list > .item > div 这类层级选择器断链。验证不能只看“有没有报错”，得交叉查三件事：
- 在 Console 执行
document.querySelectorAll('div:not([class]):not([id]):not([data-*])').length，数值下降说明空壳减少；但若document.querySelectorAll('*').length降幅远小于预期，说明有隐式依赖没暴露出来 - 打开 Coverage 面板，删完再刷新，确认灰掉的 CSS 行没意外变少——如果某段样式突然“活”了，大概率是你删掉了它唯一匹配的父容器
- 检查 JS 是否通过
el.parentNode或el.parentElement向上找节点，这类逻辑在扁平化后极易失效；比查addEventListener更隐蔽的是el.dataset和el.getAttribute('data-role')
轻量化测试该盯哪几个指标
别只看 Lighthouse 的“DOM size”分数。真实瓶颈藏在主线程调度里：
立即学习“前端免费学习笔记（深入）”；
- Performance 面板录制一次滚动操作，重点看 “Layout” 阶段单次耗时是否压到
16ms以内；超过就说明 DOM 太重或样式触发了强制同步布局 - 在 Elements 面板右键
→ “Copy outerHTML”，粘贴进编辑器，统计<div> 出现频次；如果占比超 <code>60%，结构大概率失衡 - 用
performance.now()包住document.querySelectorAll('*')执行前后，对比解析耗时变化——注意别在循环里反复调用，它本身就会触发重排
最常被忽略的点是：删标签不难，难的是识别“看似必要实则冗余”的语义包装。比如全站统一用 <section><p>…</p></section>，单看没错，但 200 个页面加起来就是多出 200 个无实质语义的节点。工具能告诉你数量，但没法替你判断那个 <div class="spacer"></div> 是不是早该被 gap: 12px 替代。
