dom节点超2000会致低端设备渲染崩溃而非卡顿，因blink渲染器构建树时内存溢出；spa首屏＞500节点即占内存300mb+，＞2000节点易抛rangeerror或静默失败。
DOM节点数超2000会直接触发低端设备渲染崩溃
不是卡顿，是真崩溃——Chrome on Android 8.1、旧款Chromebook在document.querySelectorAll('*').length超过2000时，layout阶段常因内存溢出被系统强制杀进程。这不是JS执行慢，而是浏览器底层渲染器（Blink）在构建渲染树时耗尽堆内存。
实测数据：SPA首屏节点数＞500，低端设备冷启动后3秒内内存占用就突破300MB；整页节点＞2000，appendChild调用可能直接抛RangeError: Maximum call stack size exceeded或静默失败。
- 别信“只是卡”，先跑
document.querySelectorAll('*').length看一眼真实数字 - SSR模板生成的空wrapper（如
<div class="container"><div class="row"><div class="col">）每层都吃掉1–2KB内存，5层嵌套≈10KB/节点 <li> <code>v-html插入未清洗的HTML字符串最危险：服务端返回带注释、空格、冗余<span></span>的富文本，节点数可能翻倍 - 用
DOMPurify.sanitize()过滤后再插入，比直接innerHTML安全，且能剔除90%以上无意义节点 - 检查工具：用
document.body.innerHTML复制到编辑器，搜索<div><div>连续出现3次以上的位置 <li>替换方案：用<code>display: contents抹平无功能wrapper（注意Safari 15.4+支持），或改用<fieldset></fieldset>替代<div class="form-group"> <li>图标+文字组合别写三层<code><div> <svg></svg><div>文字</div> </div>，直接<label><svg></svg>文字</label> - 分隔线不用
<hr>或<div class="divider">，用<code>::after { border-bottom: 1px solid #eee; }实时HTMLCollection遍历是内存泄漏高危操作
getElementsByClassName、getElementsByTagName返回的HTMLCollection是活引用，每次访问.length或[i]都会触发样式重计算+布局树重建，在低内存设备上极易引发OOM（Out of Memory）。- 错误写法：
for (let i = 0; i ——每次循环都读<code>els.length，等于反复触发layout - 正确做法：先转成静态数组
Array.from(els)或用querySelectorAll（返回NodeList，非实时） - 更优解：如果只查一次，直接用
document.querySelector('.target')；如果需批量操作，用document.querySelectorAll('.target')再forEach - 滚动监听里禁用
document.querySelectorAll('.item')——改用事件委托，绑定在父容器上，靠e.target.matches('.item')判断
批量插入节点必须用DocumentFragment或insertAdjacentHTML
循环调用
appendChild插入100个节点，会触发100次重排+100次内存分配，低端设备大概率卡死或崩溃。关键不是“插得多”，而是“插得太碎”。- 必须用
document.createDocumentFragment()缓存所有新节点，最后只调用一次parent.appendChild(fragment) - 若插入的是HTML字符串，优先用
el.insertAdjacentHTML('beforeend', htmlStr)，它不销毁已有事件监听器，且比innerHTML少一次DOM树重建 - 插入前临时设
parent.style.display = 'none'，插入完成再恢复，可彻底屏蔽中间态重排和内存抖动 - 滚动加载场景下，虚拟滚动（virtual scrolling）不是可选项——是必选项。保持DOM节点恒定在50–100个以内，内存占用才能稳定在150MB以下
div，而是每次写<div class="wrapper">前，心里多问一句：“这个节点有没有真实语义、样式或事件绑定？没有的话，它正在悄悄吃掉用户设备的最后一丝内存。”</div> - 错误写法：
深层嵌套DOM结构让内存压力翻倍
DOM深度＞3层时，每个节点的内存开销不是线性增长，而是指数级上升——因为浏览器要为每层父节点缓存样式继承链、布局上下文、事件监听器代理表。一个5层嵌套的<div><div><div><div><input></div></div></div></div>，实际内存占用≈7个扁平<input>之和。
