必须先验证再删除：在Elements面板右键节点设“Break on Attribute modifications”，全局搜索class/id/data属性在JS/CSS中是否被querySelector、addEventListener或属性选择器引用，再用vscode-html-validate插件检测未引用id和废弃标签。
直接删 HTML 里的 class、id、data-* 或 style 属性，大概率会炸——Cannot read property 'classList' of null、样式错乱、交互失效都是常见后果。必须先验证是否被运行时逻辑引用，再决定删不删。
怎么判断某个 class 或 id 是否真无用？
不能只看 CSS 文件里有没有对应规则。很多 class 是 JS 动态切换的（比如 collapse、is-loading），或被第三方库隐式消费（如 Bootstrap 的 data-toggle）。
- 在 Chrome DevTools Elements 面板右键该节点 → Break on → Attribute modifications，然后触发页面交互（点击、滚动、表单提交），看是否断点命中
- 全局搜索
document.querySelector(".xxx")、getElementById("yyy")、dataset.xxx、addEventListener("click", ...)等调用 - 检查构建产物（如
main.js）是否还含该标识符——压缩后可能变成a.classList.toggle("z")，得用正则/\.toggle\(["']([^"']+)["']/g扫描 - 临时改名灰度验证：
class="xxx"→class="xxx__dead"，跑一遍 E2E 测试或手动走关键路径
批量清理空 class/style 的安全正则怎么写？
VS Code「在文件中替换」能快速处理大量低风险冗余，但必须人工核对上下文，尤其防误删业务关键内联样式（如 style="display:none" 是隐藏逻辑）。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 删空
class：匹配class\s*=\s*["']["']，替换为空 —— 注意要勾选「正则表达式」和「全字匹配」 - 删空
style：用style\s*=\s*["'][^"']*?["']，但得先确认该属性没被 JS 读取（比如el.style.display） - 删前后带空格的 class 值（如
class=" a b "）：需用class\s*=\s*["']\s*["']，否则漏掉 - 别用
html-minifier的removeUnusedCSS直接清 class——它只扫已提取的 CSS 文件，对 JS 拼接的el.className += " active"完全不可见
用 html5-clear 清理无用标签和废弃属性靠谱吗？
html5-clear 是基于 HTMLHint 的静态分析工具，适合清理 <font></font>、<center></center>、未闭合标签、无效属性（如 align 在 <div> 上），但它不分析 JS 运行时行为，也不能识别动态生成的 class。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>安装后执行：<code>npx html5-clear -f index.html -o cleaned.html
id 或 class，除非你显式启用 no-unused-id 规则，且该规则只报错，不自动删data-* 属性，它只检查是否符合命名规范（如 data-user-id 合法，dataUserID 报 warn），不判断是否被 JS 引用querySelectorAll('[data-temp]') 全局监听”的属性——html5-clear 完全不覆盖这种场景DOMPurify 能不能用来清理项目内 index.html？
不能。DOMPurify 是为富文本输入设计的 XSS 净化器，它的白名单机制会把 <script></script>、<link>、<meta> 全干掉——而这些恰恰是入口 HTML 的核心节点。
- 它默认放行
style属性和大量内联 CSS（如color、font-size），CMS 富文本才需要禁用；项目 HTML 里这些往往是必需的 - 若强行用它处理
index.html，<script type="module"></script>会被删，<link rel="preload">会消失，页面直接白屏 - 它也不处理
id或class的语义依赖，只按标签/属性白名单重建 DOM，属于“重写”而非“清理” - 真正适合项目 HTML 的是组合策略：用
vscode-html-validate扫静态未引用id，用 DevTools 断点验证运行时访问，再人工删
最易忽略的点是：清理后必须验证 SSR 渲染一致性。如果服务端用 renderToString() 生成的 HTML 和客户端 hydrate 时 DOM 结构不一致（比如删了某个 id 导致服务端有、客户端无），React/Vue 会强制重绘，性能暴跌且可能触发 hydration error。
