dataset读取比getAttribute()快，因它是原生专用接口、直连DOM属性表；而getAttribute()需完整查找路径，性能略低，且IE10及以下不支持dataset，须降级使用。
原生 dataset 读取比 getAttribute() 快，但仅限现代浏览器
在 Chrome、Firefox、Safari 和 Edge（Chromium）中，dataset 是原生 DOM API 提供的专用接口，底层直接映射到元素的自定义属性表，不触发属性解析或字符串匹配。而 getAttribute("data-xxx") 是通用属性读取，每次调用都要走完整属性查找路径，性能略低（尤其在大量循环中差异可测）。IE10 及以下不支持 dataset，必须降级用 getAttribute()。
jQuery.data() 不读 HTML，它读的是 jQuery 内部缓存
这是最容易踩坑的点：$("#el").data("foo") 从不访问 HTML 中的 data-foo 属性，而是读取 jQuery 自己维护的内存对象（$.cache 或元素上的 __jQ 私有属性）。即使你用原生 JS 修改了 el.dataset.foo = "new"，$(el).data("foo") 仍返回旧值；反之，用 .data("foo", "x") 设置后，HTML 中的 data-foo 完全不变。这种分离设计本意是支持复杂类型（如函数、对象），但代价是与 DOM 状态脱钩。
jQuery.attr("data-xxx") 才真正读写 HTML 属性
如果你需要和 HTML 同步、能被 CSS 选择器（如 div[data-status="active"]）匹配、或被其他库/框架感知，必须用 attr()：
-
$("#el").attr("data-id")→ 读取当前 HTML 中的data-id值（字符串） -
$("#el").attr("data-id", 123)→ 写入 HTML，浏览器开发者工具可见变更 - 注意：
attr()返回始终是字符串，不会自动转数字或布尔值 - 若需类型转换，得自己做：
parseInt($("#el").attr("data-count"), 10)
混合使用时的典型陷阱：值不同步 + 类型混淆
常见错误场景：
立即学习“前端免费学习笔记（深入）”；
- 页面加载时有
<div id="btn" data-index="5"></div> - 执行
$("#btn").data("index", 10)→ jQuery 缓存变为 10，但 HTML 仍是data-index="5" - 再执行
$("#btn").attr("data-index")→ 得到"5"，不是 10 - 执行
$("#btn").data("index")→ 得到10（数字），但$("#btn").attr("data-index")仍是字符串"5" - CSS 选择器
div[data-index="10"]永远不会命中，因为 HTML 没变
最易被忽略的是：data- 属性名在 dataset 中自动驼峰化（data-user-id → dataset.userId），但 attr() 和 jQuery.data() 都按字面量处理（data("user-id") 合法，data("userId") 会失败）。
