万级单选/复选框卡死主因是dom节点爆炸、样式继承链拉长及事件监听器批量绑定；radio因同name互斥更新链导致后续切换延迟达420ms以上，checkbox则因线性增长监听器致点击延迟280ms；解耦渲染态与数据态，采用虚拟滚动+占位行+惰性挂载+禁用for属性+规避重绘陷阱，方可保障性能。
为什么万级单选/复选框会卡死页面
不是或本身慢，而是它们在万级列表中会触发三重连锁反应：DOM节点爆炸、样式继承链拉长、事件监听器批量绑定。一个10000条的列表，若每条含3个单选+2个复选，光就生成5万个节点——这已远超Chrome推荐的单页2000节点安全阈值。更糟的是，每个默认继承父级color、font-size等属性，DOM深度每+1，继承计算耗时翻倍；而用v-model或onchange绑事件时，框架还会为每个节点创建响应式代理，内存占用直接飙升。
radio与checkbox在万级场景下的关键差异
两者性能表现不同，根源在浏览器原生行为：radio组内所有同name的节点共享一个“互斥更新链”，任一选中都会触发其余节点状态同步；checkbox则完全独立，但大量独立监听器叠加后，JS执行时间呈线性增长。实测10000个checkbox点击响应平均延迟280ms，而同量radio在首次选中后，后续切换延迟跳升至420ms以上——因为浏览器要遍历整个name匹配集做checked清理。
-
radio必须保证name唯一且全量存在DOM中，否则互斥失效；服务端分页时若只返回当前页的radio，跨页选中逻辑就崩了 -
checkbox可单独控制，适合“全选/反选”批量操作，但document.querySelectorAll('input[type="checkbox"]')在万级DOM下耗时超120ms，慎用 - 两者都依赖
label提升可访问性，但for属性绑定会强制浏览器建立ID索引映射，万级ID注册本身就是开销
不改交互逻辑的前提下怎么压低DOM数量
核心思路是：把“渲染态”和“数据态”解耦。别让每个选项都对应一个真实，而是用虚拟滚动+占位行维持滚动体验，仅视口内±2屏渲染真实控件。
- 用
virtuoso或react-window类库，设置itemHeight固定值（如40px），避免动态高度计算拖慢滚动 - 视口外的行用
<tr><td colspan="3"><div style="height:40px"></div></td></tr>占位，不挂任何事件监听器 - 真实只在
useEffect或mounted钩子里按需挂载，且用addEventListener('change', handler, { once: true })避免重复绑定 - 禁用
label的for属性，改用嵌套写法：<label><input type="checkbox"><span>选项文字</span></label>，省掉ID索引开销
容易被忽略的CSS与JS陷阱
很多卡顿不是出在上，而是配套样式和脚本悄悄放大了开销。
- 别给
input[type="checkbox"]加transition: all 0.2s——每次checked变更都会触发重绘，万级下直接卡死 - 避免用
:checked + .label-text这类兄弟选择器，浏览器需遍历全部后续兄弟节点匹配，深度越深越慢 - 不要在循环里调用
getBoundingClientRect()或offsetTop获取位置，这会强制同步布局计算，10000次调用可阻塞主线程3秒以上 - Vue中用
v-model绑定万级checkbox时，务必配合computed缓存选中数组，而非每次filter(item => item.checked)实时计算
真正难的不是删掉几个，而是敢不敢把“用户看到的列表”和“实际需要的DOM”划清界限——滚动时只要20个真实控件，其余全是高度占位，这才是万级单复选框能跑起来的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
