data-*属性必须以小写字母开头，data-后首字符只能是a–z；如data-userid合法，data-userid、data-123id、data-_id均不合法，否则dataset无法正确映射读取。
data-* 属性必须以小写字母开头吗？
必须。HTML 规范要求 data- 后的第一个字符只能是 ASCII 小写字母（a–z），不能是数字、大写字母或下划线。比如 data-userid 合法，data-UserID、data-123id、data-_id 都不合法——浏览器虽可能容忍，但 DOM API 读取时会统一转为小写，且不符合 W3C 校验。
实际开发中容易踩的坑是直接照搬 JS 变量命名习惯（如 data-userId），结果用 dataset.userId 拿不到值，得写成 dataset.userid。因为连字符后的大写字母会被自动转为小写，且连字符被抹去。
如何用 dataset 正确读写 data 属性？
dataset 是最常用的访问方式，但它有严格映射规则：连字符分隔的 name 会转为驼峰（data-user-name → dataset.userName），所有字母强制小写，且不支持数字开头或纯数字键名。
-
data-user-id="1001"→ 读取用element.dataset.userId（不是userid或user-id） -
data-api-url="https://api.example.com"→dataset.apiUrl -
data-2x="true"→dataset["2x"]才能读（dataset.2x语法错误），推荐避免这种写法 - 写入时：
element.dataset.status = "loading"会自动创建data-status="loading"
什么时候该用 getAttribute 而不是 dataset？
当需要原样读取属性值（包括大小写、连字符、空格）、或属性名不满足 dataset 命名规则时，getAttribute 更可靠。
常见场景：
- 读取
data-User-ID这类非标准命名（dataset.userid仍可读，但语义已丢失） - 判断属性是否存在但值为空：
element.hasAttribute('data-loaded')比dataset.loaded === undefined更准确 - 读取含特殊字符的值，如
data-config='{"a":1}'，直接getAttribute拿字符串再JSON.parse，比依赖 dataset 自动转换更可控 - 服务端渲染时，某些框架（如 Django 模板）可能生成
data-foo-bar="true"，但 JS 里想区分字符串"true"和布尔值，这时手动解析更安全
data 属性会影响性能或 SEO 吗？
不影响 SEO：搜索引擎不索引 data- 属性内容，也不将其作为排名信号。但别把关键文本塞进去（比如把标题藏在 data-title 里），那既不可访问也不利于爬虫。
性能方面，大量 data 属性本身开销极小，但要注意间接影响：
- DOM 节点过多 + 每个带多个 data 属性 → 内存占用微增（通常可忽略）
- 频繁读写
dataset触发重排/重绘？不会——data 属性变更不触发样式或布局计算 - 真正要小心的是：用 data 属性存储大段 JSON 或 HTML 字符串，然后每次点击都
JSON.parse或innerHTML插入，这比提前解析好或用真实 DOM 节点慢得多
复杂点在于，很多人把 data 属性当成“轻量状态容器”，却忘了它本质是字符串，类型转换和重复解析成本得自己兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
