空值属性如class=""、id=""必须清理，因污染DOM、干扰CSS、增大SSR体积；仅删明确赋值为空字符串的属性，aria-除外，data-按业务判断，推荐构建时用html-minifier或vite-plugin-html处理。
HTML 中的空值属性（如 class=""、id=""、data-id=""）不是“没用”，而是“有害”——它们会污染 DOM 属性状态、干扰 CSS 选择器匹配、增加 SSR 渲染体积，且多数情况下毫无语义价值。必须清理，但不能暴力扫除。
哪些空值属性必须清理？
只清理明确赋值为空字符串的属性，即形如 attr="" 的写法。这类属性在 HTML 源码和序列化后的 outerHTML 中都可见，且 el.hasAttribute('attr') 返回 true，但 el.getAttribute('attr') 返回 ""。
-
class=""和id=""是最常见、最该优先处理的——它们不触发任何样式或锚点行为，却会被[class]或[id]选择器意外捕获 -
data-*类空属性（如data-track=""）需按业务判断：若后端/埋点 SDK 明确忽略空值，可删；若存在“存在即上报”逻辑，则保留 -
aria-*属性（如aria-label=""）绝不能删——空字符串是合法的“无标签”声明，删除后反而可能触发屏幕阅读器报错
用 querySelector 精准定位并移除
别用正则全局替换，也别遍历所有元素再判断属性值。现代浏览器原生支持属性值精确匹配：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 清理所有
class=""：document.querySelectorAll('[class=""]').forEach(el => el.removeAttribute("class")) - 同时清理
id=""和class=""：document.querySelectorAll('[id=""], [class=""]').forEach(el => el.removeAttribute(el.hasAttribute("id") ? "id" : "class")) - 注意：
[class]会匹配所有含class属性的元素（包括class="btn"），不可用于此场景
构建时批量清理更安全
运行时 DOM 操作治标不治本；源码层清理才能避免 SSR 输出污染、Git diff 噪音和团队协作误解。
立即学习“前端免费学习笔记（深入）”；
- Webpack 用户可用
html-minifier-terser插件，启用removeEmptyAttributes: true（默认关闭） - 注意它默认不清理
class和id，需手动加白名单：emptyAttrs: ["class", "id", "data-test"] - Vite 用户推荐
vite-plugin-html+ 自定义 transform，在enforce: 'pre'阶段用正则处理：html.replace(/(\s+(?:class|id|data-[a-z-]+)\s*=\s*["'])["'](?=\s*\/?>)/gi, "$1")—— 这个正则只删attr=""，不碰attr=" "或attr="x"
容易被忽略的边界情况
空值属性常藏在动态渲染逻辑里，比如框架模板中 <div class="{{ isActive ? 'active' : '' }}"></div>。这类代码即使 JS 执行后 DOM 正常，源码仍输出 class=""。
-
class=""和class（无值）是两回事：class不会被[class=""]匹配，需单独处理（但极少出现，一般不用管） - 服务端模板（如 EJS、Nunjucks）中，
<div class="<%= cls %>"></div>若cls为null或undefined，会输出class（无值），而非class=""；这种要靠模板层条件判断过滤，不能依赖 DOM 清理 - 清理后务必检查：某些旧版 jQuery 插件或自定义事件监听器可能依赖
hasAttribute判断状态，删掉空属性后逻辑可能断裂
