真正拖慢渲染的是增加dom节点、触发重排和加重计算的冗余结构：如无语义div嵌套、空wrapper、未清洗的v-html内容、ul/li套表单等；css伪元素、gap、outline等可替代大量标签。
减少HTML冗余代码确实能直接改善渲染性能，但效果不是线性的——它不靠“省几KB”起作用，而是通过降低DOM树复杂度、减少reflow触发频率、缩短解析时间来释放浏览器主线程。实测中，document.querySelectorAll('*').length 从 3200 降到 1400，低端安卓机滚动帧率可从 42fps 提升至 58fps；但若只删了 20 个空格和注释，几乎看不出变化。
哪些冗余代码真会影响渲染速度
真正拖慢渲染的不是“写得不够美”，而是那些让浏览器多干活、多计算、多重排的结构：
<div><div><div><button> 这类无语义嵌套：每层 <code>div都要创建节点、计算样式、参与布局，哪怕只设margin也能用gap或flex替代- SSR 渲染后残留的空 wrapper：
<div class="wrapper"></div>，既没样式也没事件，却占用 DOM slot 和内存 -
v-html或innerHTML插入未清洗的服务端 HTML：含注释、多余换行、空标签（如<p></p>），节点数可能翻倍 - 用
<ul><li></ul>套表单项：本该是<form></form>内平级结构，结果多出ul+li两层节点+闭合标签 - 打开 Elements 面板，右键
→ “Copy outerHTML”，粘贴到编辑器里查<div> 出现频次；超过 60% 是 <code><div>，大概率结构失衡 <li>在 Console 执行 <code>document.querySelectorAll('*').length，>2000 就该警惕；>3500 在低端机上已明显卡顿 - Performance 面板录制一次滚动操作，看 “Layout” 阶段耗时是否 >16ms（即单帧阈值），高则说明 DOM 太重或强制同步布局频繁
- 分隔线不用
<div class="divider"></div>，改用::after+content: ""，零节点开销 - 垂直间距不用空
<div style="height: 12px"></div>，改用gap: 12px（需父容器display: flex或grid） - 外边框模拟不用套壳
<div><div><input></div></div>，用outline: 2px solid #ccc; outline-offset: 4px - 带图标的输入框：把
<svg></svg>放进<label></label>，不要三层div包裹input
怎么判断你的 HTML 是否冗余过度
别靠肉眼扫，用 DevTools 快速验证：
CSS 能替代多少 DOM 节点
很多视觉元素根本不需要真实标签，CSS 伪元素、间隙属性、outline 就够用：
真正难的是识别“看似合理实则冗余”的结构——比如一个 <section></section> 里只包一个 <p></p>，语义没错，但若全站都这么写，DOM 节点数就悄悄超标了。删节点容易，改习惯难；工具能报数量，但没法告诉你哪一层 wrapper 其实早该被 flex 的 align-items 替掉。
