document.querySelectorAll('*').length超过2000会引发非线性reflow卡顿，实测于Chrome DevTools及低端安卓机、SSR首屏场景；SPA首屏建议≤500，整页应控制在2000以内。
document.querySelectorAll('*').length 超过 2000 就该警觉了
这不是理论阈值，是 Chrome DevTools 里实测可复现的卡顿拐点——尤其在低端安卓机或 SSR 首屏场景下，layout 耗时会非线性翻倍。SPA 首屏建议 ≤ 500，整页硬性约束在 2000 以内比较稳妥。别等用户反馈“卡”，先跑这行代码：document.querySelectorAll('*').length，把数字打出来看一眼。
哪些标签/写法最常偷偷堆出冗余节点
真正拖慢渲染的不是语义化标签本身，而是开发中无意识的“结构惯性”：
-
<div>套<div>套<div>：只为给按钮加 margin 或居中，其实用margin、flex或grid就能解决 - 用
<ul>渲染表单项组：语义错位，且多出两层节点 + 闭合标签；改用<fieldset>+<legend>更轻量 - SSR 模板自动生成的空 wrapper：
<div class="wrapper"></div>，既无样式也无交互，纯属占位 -
v-html或innerHTML插入未精简的 HTML 片段：服务端返回带空格、注释、冗余标签的内容，直接放大节点数
用 CSS 替代 DOM 节点的实操方式
很多视觉效果根本不需要真实元素，CSS 完全能接管：
- 分隔线、角标、图标用
::before/::after生成，避免额外<div class="divider"> - 间距优先用
gap（display: grid或flex），而不是塞一个<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 个以内
<div>，而是团队对“这个 wrapper 真的必要吗”的持续质疑习惯——一旦容忍一个无功能的节点，后面就容易批量复制。 
