直接删掉没用的比任何css或js优化更有效；dom超2000节点时低端设备layout耗时呈指数级增长，需用document.queryselectorall('*').length检测并控制首屏≤500、整页≤2000。
直接删掉没用的 <div> 比调任何 CSS 或 JS 优化都管用；DOM 节点数一超 2000，低端设备 layout 耗时就可能翻倍——这不是线性增长，是指数级拖慢。
<h3>哪些标签最容易悄悄堆出冗余节点</h3>
<p>真正拖慢渲染的不是语义化标签本身，而是开发中无意识的“结构惯性”：</p>
<ul><li><code><div> 套 <code><div> 套 <code><div>：只为给按钮加 margin 或居中，其实用 <code>margin、flex 或 grid 就能解决
<ul></ul> 渲染表单项组：语义错位，且多出 <ul></ul> + 每个 <li> 的开闭标签；改用 <fieldset></fieldset> + <legend></legend> 更轻量<div class="wrapper"></div>，既无样式也无交互，纯属占位v-html 或 innerHTML 插入未精简的 HTML 片段：服务端返回带空格、注释、冗余标签的内容，直接放大节点数<div>：<code><label><svg><input></svg></label> 完全能替代三层嵌套
用 CSS 替代 DOM 节点的实操方式
很多视觉效果根本不需要真实元素，CSS 完全能接管：
- 用
::before/::after生成分隔线、角标、小图标，避免额外<div class="divider"> <li>间距优先用 <code>display: grid或flex的gap属性，而不是塞一个<div style="height: 16px"></div> - 外边框用
outline+outline-offset模拟，比套一层<div> 更轻量 <li>带图标的输入框，用 <code><label><svg><input></svg></label>，别写三层嵌套<div><div><input></div></div> - 用
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></template>或<fragment></fragment>包裹（除非必要逻辑分组），避免编译后产生冗余<div> <p>真正难的不是删掉几个 <code><div>，而是团队对“这个 wrapper 真的必要吗”的持续质疑习惯——一旦容忍一个无功能的节点，后面就容易批量复制。</div>
批量插入大量节点时怎么避免重排风暴
一次性插入 1000 行表格？别循环 appendChild，那会触发 1000 次 layout 计算：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
怎么快速发现和收敛冗余节点
靠肉眼很难识别隐藏膨胀，得靠工具和量化约束：
