直接删掉没用的<div>比任何CSS或JS优化更有效；DOM超2000节点时低端设备layout耗时呈指数级增长，需用document.querySelectorAll('*').length检测并控制首屏≤500、整页≤2000。
直接删掉没用的 <div> 比调任何 CSS 或 JS 优化都管用；DOM 节点数一超 2000，低端设备 layout 耗时就可能翻倍——这不是线性增长，是指数级拖慢。
哪些标签最容易悄悄堆出冗余节点
真正拖慢渲染的不是语义化标签本身，而是开发中无意识的“结构惯性”：
-
<div>套<div>套<div>：只为给按钮加 margin 或居中，其实用margin、flex或grid就能解决 - 用
<ul>渲染表单项组：语义错位，且多出<ul>+ 每个<li>的开闭标签；改用<fieldset>+<legend>更轻量 - SSR 模板自动生成的空 wrapper：
<div class="wrapper"></div>，既无样式也无交互，纯属占位 -
v-html或innerHTML插入未精简的 HTML 片段：服务端返回带空格、注释、冗余标签的内容，直接放大节点数 - 为图标单独包一层
<div>：<label><svg><input></label>完全能替代三层嵌套
用 CSS 替代 DOM 节点的实操方式
很多视觉效果根本不需要真实元素，CSS 完全能接管：
- 用
::before/::after生成分隔线、角标、小图标，避免额外<div class="divider"> - 间距优先用
display: grid或flex的gap属性，而不是塞一个<div style="height: 16px"></div> - 外边框用
outline+outline-offset模拟，比套一层<div>更轻量 - 带图标的输入框，用
<label><svg><input></label>，别写三层嵌套<div><div><input></div></div>
批量插入大量节点时怎么避免重排风暴
一次性插入 1000 行表格？别循环 appendChild，那会触发 1000 次 layout 计算：
立即学习“前端免费学习笔记（深入）”；
- 用
document.createDocumentFragment()缓存所有新节点，最后只调用一次appendChild() - 若数据来自服务端 HTML 字符串，用
insertAdjacentHTML('beforeend', htmlStr)比innerHTML更安全（不销毁事件监听器），但务必先用DOMPurify.sanitize()过滤 - 插入前临时设父容器
style.display = 'none'，插入完成再恢复，彻底屏蔽中间态重排 - 滚动加载场景下，直接上虚拟滚动（virtual scrolling），保持 DOM 节点数恒定在 50–100 个以内
怎么快速发现和收敛冗余节点
靠肉眼很难识别隐藏膨胀，得靠工具和量化约束：
- Chrome DevTools → Elements 面板右键节点 →
Break on subtree modifications，观察动态插入是否失控 - 运行
document.querySelectorAll('*').length快速统计总节点数，SPA 首屏建议 ≤ 500，整页控制在 2000 以内 - 在 CI 中加入 Puppeteer 脚本，加载页面后断言
document.querySelectorAll('div, span, section').length不超阈值 - Vue/React 开发中禁用无意义的
<template>或<Fragment>包裹（除非必要逻辑分组），避免编译后产生冗余<div>
真正难的不是删掉几个 <div>，而是团队对“这个 wrapper 真的必要吗”的持续质疑习惯——一旦容忍一个无功能的节点，后面就容易批量复制。
