直接删掉冗余的 和 比任何 css/js 优化都有效；dom 节点超 2000 时，低端设备 layout 耗时呈指数级增长。真正拖慢渲染的是人为嵌套的“结构惯性”，如多层 套娃、误用 渲染表单、ssr 空 wrapper、图标单独包层等；应优先用 ::before/after、gap、outline、语义化标签（如 ）替代；可通过 document.queryselectorall('*').length 快速检测节点数，spa 首屏建议 ≤500，整页≤2000，并在 ci 中加入断言约束。
直接删掉那些没用的 <div> 和 <code><span></span>，比调任何 CSS 或 JS 优化都管用。DOM 节点数一超 2000，低端设备上 layout 耗时就可能翻倍——这不是线性增长，是指数级拖慢。
哪些标签最容易悄悄膨胀 DOM 节点数
真正拖慢渲染的，往往不是语义化标签本身，而是人为套嵌出来的“结构惯性”：
<div> 套 <code><div> 套 <code><div>：只为给按钮加 margin，其实父元素加 <code>padding或用gap就够了- 用
<ul></ul>渲染表单组：多出<ul></ul>+ 每个<li>的开闭标签，而<fieldset></fieldset>+<legend></legend>更语义、更轻量 - SSR 模板自动注入的空 wrapper：
<div class="wrapper"></div>没样式也没交互，纯属占位 - 为图标单独包一层
<div>：<code><label><input><svg></svg></label>完全能替代三层嵌套用 CSS 替代 DOM 节点的实操方式
很多视觉效果根本不需要真实节点，CSS 能接管定位、分隔、装饰等职责：
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
::before/::after生成分隔线、角标、小图标，避免额外<div class="divider"> <li>用 <code>gap（flex/grid）替代“占位<div>”控制间距，不用再写 <code>margin逻辑 - 用
outline+outline-offset模拟外边框，比套一层<div> 包裹轻量得多 <li>表单项带图标时，优先用 <code><label></label>包裹<input>和<svg></svg>，而非<div><div><input></div></div> - 在 Chrome DevTools → Elements 面板右键任意节点 → Break on subtree modifications，看动态插入是否失控
- 运行
document.querySelectorAll('*').length快速统计总节点数；SPA 首屏建议 ≤ 500，整页控制在 2000 以内 - CI 中用 Puppeteer 加断言：
document.querySelectorAll('div, span, section').length - Vue/React 开发中禁用无意义的
<template></template>或<fragment></fragment>包裹，除非真有逻辑分组需求
怎么快速发现和收敛冗余节点
靠肉眼很难识别隐藏膨胀，得靠工具和量化约束：
最难的不是写一行代码删掉某个
<div>，而是每次写新组件时都问一句：“这个 wrapper 真的必要吗？”——一旦放过一个，后面就容易批量复制。</div> - 用
