dataset读写变慢因每次访问触发属性解析、字符串拷贝及样式计算；应缓存值、避免存大JSON、慎用delete、结合事件委托时先过滤再读、优先用Map/WeakMap或原生属性替代。
直接改 DOM 的 dataset 属性不会触发重排或重绘，但频繁读写、类型转换不当、或与事件委托混用时，很容易变成性能隐性瓶颈——尤其在列表项超过 100 条的场景下。
dataset 读写为什么变慢？
浏览器对 dataset 的访问不是纯内存操作：每次读取 element.dataset.xxx 都会触发属性解析（连字符转驼峰）、字符串拷贝；写入则触发 DOM 属性同步和样式计算检查。高频循环中反复调用，开销会叠加。
- 避免在
for循环或requestAnimationFrame中反复读dataset—— 提前缓存值，比如const id = el.dataset.userId; - 不要用
dataset存大对象 JSON 字符串，比如data-user-config='{"theme":"dark","lang":"zh"}'；解析成本高，且无法利用 JS 引用优化 -
delete element.dataset.xxx触发属性移除 + 渲染树更新，比设为空字符串更重；如需“清空”，优先用element.dataset.xxx = ""
dataset 和事件委托一起用的坑
事件委托本身轻量，但若在回调里反复查 e.target.dataset，又没做节流或缓存，就会放大解析开销。常见于 todo 列表的删除按钮绑定。
- 委托监听时，先用
e.target.matches('[data-action="delete"]')快速过滤，再读dataset，避免对所有点击目标都解析 - 如果多个事件都要用同一个
dataset值（比如userId），在进入业务逻辑前统一提取，别分散在 if/else 里重复读 - 动态插入的元素，别依赖
dataset做初始状态判断——服务端渲染或 JS 初始化时就该把关键态写进 JS 变量，而非靠 DOM 查询
替代 dataset 的轻量方案
当数据绑定频率高、结构复杂，或需要响应式更新时，dataset 就不是最优解。可降级为更可控的模式：
立即学习“前端免费学习笔记（深入）”；
- 用
Map显式维护 DOM 元素到数据的映射：const dataMap = new Map(); dataMap.set(el, { userId: 123, active: true });，读写 O(1)，无解析开销 - 对表单类组件，直接用
el.value/el.checked等原生属性，比dataset更快、类型明确 - 用
WeakMap存私有状态（如编辑态、加载中），不污染 DOM，且随元素回收自动清理，适合生命周期短的组件
真正卡顿往往不出现在 dataset.userId 这一行，而出现在你把它和 innerHTML 拼接、或在 scroll 事件里反复查询的组合动作里——盯住调用上下文，比优化单个 API 更有效。
