删掉无语义的能显著提升首屏性能。通过devtools断点、css匹配检查、data-id和空属性判断识别冗余节点，用语义化标签替代，避免非法嵌套，并在框架中使用fragment或template减少包裹层。
直接删掉那些只为了撑样式、没语义的 <div>，比学一堆技巧更有效。浏览器解析 DOM 是逐层建树的过程，每多一层无意义嵌套，就多一次节点创建、样式计算和潜在重排——这不是“看起来乱”，是实打实拖慢首屏。
<h3>怎么一眼识别该删的 <code><div>
<p>别靠肉眼扫源码，看浏览器最终生成的 DOM 树：</p>
<ul><li>在 DevTools 的 Elements 面板里，右键任意疑似包裹层的 <code><div> → “Break on subtree modifications”，然后点按钮、展开菜单等触发渲染；如果断点停在这层而非目标元素，说明它纯属摆设
<li>用 Ctrl+F 搜 <code>div[class]，逐个点开对应 class，去 Styles 面板查有没有真实生效的 CSS 规则；没匹配到任何样式，整行 <div class="xxx"> 连同闭合标签一起删
<li>特别注意 CMS 或低代码平台导出的 <code><div data-id="xxx">，只要没 JS 通过 <code>data-id 绑定逻辑，全删
<div> 是否既没 class、也没 id、还没内联 style——三者全无？直接删
<h3>语义化标签不是为了 SEO，是为了解析提速</h3>
<p>浏览器对 <code><header></header>、<nav></nav>、<main></main> 等有轻量级预判优化，而一堆同级 <div> 会让解析器反复回溯确认层级关系：
<ul><li><code><div class="main-header"> → 直接换成 <code><header class="main-header"></header>（类名保留，样式照用）
<div class="nav-list"> → <code><nav class="nav-list"></nav>；<div class="card-body"> → <code><section class="card-body"></section>
<section><div>
<h2> 是错的，<code><h2></h2> 必须直接子级于 <section></section>
<main></main> 必须且只能出现一次，包进 <section></section> 或额外 <div> 会直接破坏语义
<h3>Flex/Grid 布局下，wrapper 类 <code><div> 大概率多余
<p>Flex 只作用于**直接子元素**，套一层就失效；Grid 同理。很多“布局容器”根本不需要存在：</p>
<ul>
<li>写 <code><div class="flex-container"><nav>...</nav></div>？把 display: flex 直接加到 <nav></nav> 上就行<div class="row"><div class="col">A</div></div>，让 <main></main> 自己声明：<main style="display: grid; grid-template-columns: 1fr 1fr 1fr;"><section>A</section><section>B</section></main>
<div v-for="..."><div class="item">...</div></div>，改用 <template v-for="..."><div class="item">...</div></template>
>（Fragment），别硬塞 <div>
<h3>非法嵌套会强制浏览器补节点，比冗余还糟</h3>
<p>不报错 ≠ 没问题。非法结构会触发浏览器自动修正，生成匿名节点、拉长祖先链，让局部重排扩散成整棵子树重排：</p>
<ul>
<li>
<code><p></p>
<div>hello</div> → 浏览器拆成 <p></p>
<div>hello</div>
<p></p>，多出两个空 <p></p>
<ol><p>Item</p></ol> → 拆成多个孤立 <ol></ol> 和中间 <p></p>，序号重置、焦点顺序错乱<table> 内没用 <code><tbody> 包裹 <code><tr> → 自动补全匿名表格对象，破坏 <code>table-layout: fixed 的列宽锁定
getComputedStyle(document.querySelector('xxx')).display，若返回 block 但页面实际有浮动/定位干扰，大概率是嵌套不合法导致样式继承链断裂真正难的不是“怎么删”，而是删完后发现某处 CSS 突然不生效了——那说明你之前靠冗余嵌套“凑”出来的样式依赖，现在得直面结构本身是否合理。这一步绕不开，也躲不过。
