直接清理HTML冗余属性可行，但必须验证而非盲删：空class/style需检查是否参与运行时行为，data-、aria-、lang等属性常承担隐式契约，误删会导致翻译失效、无障碍功能崩溃或服务端渲染异常。
直接清理 HTML 冗余属性是靠谱的，但“靠谱”的前提是验证而非盲删——90% 的所谓“冗余”其实藏在 JS 动态逻辑或无障碍链路里，删错一个 data-i18n 或 aria-labelledby 就可能让翻译失效或屏幕阅读器读不出关键信息。
怎么确认某个 class="" 或
空属性不是天然该删，得看它是否参与运行时行为：
- 在 Elements 面板右键对应元素 → “Break on > attribute modifications”，然后点按钮、展开菜单、切换 Tab，看是否触发断点
- 全局搜索该 class 名（比如
"btn-primary"），重点查 classList.toggle、querySelector、getElementsByClassName 这些调用，不是只搜 CSS 文件- 检查构建产物（如压缩后的
main.js）里是否还存在该字符串——混淆后可能是 e.classList.toggle("x")，得结合 sourcemap 或未压缩版本交叉看- 临时把
class="xxx" 改成 class="xxx__test"，跑一遍核心流程（登录、提交、弹窗），尤其盯住状态切换和错误提示VSCode 正则批量删空属性的实操边界
正则快，但容易越界。这几条能覆盖 85% 安全场景，前提是先关掉 <pre class="brush:php;toolbar:false;"></pre>、<script></script>、<textarea></textarea> 所在文件：
class\s*=\s*["']["'] → 替换为空（注意匹配 class="" 和 class=''）style\s*=\s*["'][^"']*?["'] → 只删整个 style 属性，不碰里面值；但 style="display:none" 得人工过一遍，很多隐藏逻辑靠它驱动(id|title|alt)\s*=\s*["']["'] → id="" 可删，alt="" 要小心：空 alt 是告诉屏幕阅读器“这是装饰图”，删了反而变成“请读出图片文件名”- 别用
.*? 跨标签匹配，比如 class=.*?> 容易吞掉中间的 <span></span>，改用 class\s*=\s*["'][^"']*?["']
哪些属性看着冗余，其实动不得
这些不是“写错了”，而是承担隐式契约：
立即学习“前端免费学习笔记（深入）”；
data-i18n 即使值为空（data-i18n=""），也可能被 i18n 工具扫描为占位符，删了会导致后续文案漏翻译lang="zh-CN" 在 new Date().toLocaleString() 格式、Intl.NumberFormat 分隔符，甚至某些字体 fallback 行为aria-labelledby="xxx" 指向的 ID 元素哪怕当前不可见（display:none），只要 DOM 里存在，就不能删该属性——否则屏幕阅读器会跳过整块区域data-module="cart" 这类 CMS/低代码标记，即使没 JS 绑定，也可能被服务端模板引擎识别并注入数据，删了页面直接空白真正省时间的不是“删得多”，而是删得准——每次清理前花 2 分钟验证一个典型节点，比事后修 3 小时兼容性问题更划算。最容易被忽略的是：JS 里用 dataset 读取的 data- 属性，它们不显眼，却常是模块开关的唯一凭证。
