data-*属性本身内存开销极小，百万节点仅增8–12mb；真正导致内存翻倍的是单个属性存储大json等长字符串，应避免存base64、长文本或重复字段。
data-* 属性在百万级节点中会吃掉多少内存
不会显著增加内存占用，但单个节点塞大 JSON 会导致内存翻倍——关键不是属性数量，而是每个 data-* 值的长度和结构。
浏览器对 data-* 的存储非常轻量：它只是把字符串原样存在 DOM 节点的属性表里，不解析、不验证、不触发任何逻辑。实测 100 万个 <div data-id="123"> 节点，比纯 <code><div> 多占约 8–12 MB 内存（取决于引擎，V8 下约 10 字节/属性）。<ul>
<li>真正踩坑的是往 <code>data-config 里塞 {"api":"/v2/user","timeout":3000,"retry":2} 这种字符串——每个值多 50–100 字节，百万节点就是 50–100 MB 额外内存
JSON.stringify() 生成的字符串若含大量重复字段（如每个节点都写 "type":"item"），建议提取公共 schema，只存差异字段data- 里存 base64 图片、长文本摘要或用户行为序列——这些该进 localStorage 或离线缓存，不是 DOM 的职责dataset 读取百万节点时的性能瓶颈在哪
不是读取本身慢，而是你每次调用 element.dataset.xxx 都触发一次属性查找+驼峰转换，高频遍历时开销会累积；更危险的是误用 for...in 遍历 dataset 对象。
dataset 是一个代理对象，访问某个键（如 el.dataset.userId）内部会做连字符转驼峰 + 字符串返回，单次成本可忽略，但循环百万次就变成明显延迟（Chrome 下约 80–120ms）。而 el.getAttribute('data-user-id') 略快 10–15%，且语义更明确。
- 批量读取时，优先用
getAttribute()，尤其在requestIdleCallback分片处理中 - 别写
for (const k in el.dataset)——dataset不是普通 object，遍历行为未定义，某些版本 Safari 会漏键或卡死 - 如果只读一次就丢弃（比如点击时取 ID），用
closest('[data-id]')+dataset.id完全没问题；但如果是滚动中持续扫描可视区节点，改用getAttribute更稳
埋点系统里 data-* 和 MutationObserver 怎么配合才不翻车
不能监听 data-* 变更本身——MutationObserver 默认不观察属性变化，必须显式开启 attributes: true 且指定 attributeFilter，否则监听器会捕获所有 class/id/title 变更，瞬间打满 CPU。
埋点常需响应 data-status="sent" → data-status="success" 这类状态跃迁，但直接监听所有 data- 属性等于监听整个 DOM 树的呼吸，毫无必要。
- 只监听具体属性：
new MutationObserver(cb).observe(el, { attributes: true, attributeFilter: ['data-status', 'data-error'] }) - 避免监听根容器（如
document.body）——百万节点下，哪怕只过滤两个data-，每帧也可能触发上千次回调 - 状态变更后，立刻用
observer.disconnect()解绑，或用once: true（现代浏览器支持），防止重复触发 - 更推荐事件驱动：状态变更时主动
el.dispatchEvent(new CustomEvent('track:status', { detail: { from: 'pending', to: 'success' } }))，比被动监听干净得多
IE11 兼容下 data-* 的驼峰转换 bug 怎么绕过
IE11 的 dataset 对连字符转驼峰有严重缺陷：比如 data-user-id 在 IE11 中无法通过 el.dataset.userId 读取，必须降级为 getAttribute，且不能依赖自动转换。
这不是“加个 polyfill 就好”的问题——IE11 的 dataset 实现根本没按标准走，部分属性名（如 data-api-url）甚至被完全忽略。线上埋点系统若仍需兼容 IE11，必须统一路径。
- 所有读取一律用
el.getAttribute('data-user-id')，写入用el.setAttribute('data-user-id', value) - 避免在代码里混用
dataset和getAttribute——同一节点上两种方式操作可能因 IE11 缓存不一致导致值错乱 - 命名严格守规：不用
data-User-ID（大小写混合）、不用data_user_id（下划线）、不用data-1st-try（数字开头），只用小写+连字符 - 如果已用
dataset写了大量代码，加一层薄封装：function getData(el, key) { return el.getAttribute(`data-${key}`); }，比全局替换成本低
百万节点埋点系统里，data-* 本身不是瓶颈，真正要盯住的是字符串体积、读取方式选择、监听范围控制和 IE11 的底层不一致——这些地方一松懈，内存和 CPU 就会无声暴涨。
