可安全批量删除的HTML属性包括border、align、valign、cellpadding、cellspacing、width（非img/canvas）、height（非img/canvas）、language、type="text/javascript"，需用VSCode正则匹配并逐项预览确认。
哪些 HTML 属性能直接批量删，不崩页面
现代浏览器根本不需要 border、align、valign、cellpadding、cellspacing 这些属性，删了不影响渲染，还能减小体积。它们是 HTML4 时代的遗物，CSS 已全面接管布局和样式控制。
安全删除的前提是：确认这些属性没被 JS 动态读取（比如 el.getAttribute('align')），也没在旧版兼容逻辑里硬编码依赖。实操建议如下：
- 用 VSCode 正则搜索
(border|align|valign|cellpadding|cellspacing)="[^"]*?"，逐项预览后替换为空 -
width和height只对<img alt="HTML冗余结构属性清理实例" >、<canvas></canvas>有意义；其他元素（如<div>）上的可删，但得先检查 computed style 是否靠它撑开尺寸<li> <code>language="javascript"和type="text/javascript"在<script></script>上属于冗余，默认就是 JS，删掉不改变执行行为 - 别碰
class=""或id=""—— 空值可能被测试脚本或 CSS 后代选择器隐式依赖，比如.form-group input会匹配<div class="form-group"><input></div> - 只设
minify: { removeRedundantAttributes: true }，显式关掉removeEmptyAttributes - 自定义元素（如
<my-button></my-button>）和<template></template>内容默认跳过，不用额外配置 - 若项目用了
<meta http-equiv="X-UA-Compatible">，它也会被删——这没问题，因为现代 Chromium/Edge 已完全无视该声明 -
<div class="clearfix"></div>改用overflow: hidden或display: flow-root替代 - 空注释
<!-- old header -->超过三个月未修改，直接删，不保留“历史痕迹”
html-webpack-plugin 的 removeRedundantAttributes 怎么不开翻车
这个选项不是“删所有看着多余的”，而是按 HTML5 规范语义判断哪些属性浏览器压根不解析。启用后它会自动删掉 <meta charset="utf-8"> 中的 charset、<link rel="stylesheet" type="text/css"> 中的 type，但绝不会动 <input type="email"> 的 type —— 因为后者参与表单验证。
容易踩的坑是把它和 removeEmptyAttributes: true 一起开，结果把 class=""、data-test="" 全清了，导致 E2E 测试断言失败。正确做法是：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
空标签和无意义嵌套怎么一眼识别并清理
不是“看起来没用”就该删，而是看它是否同时满足三个条件：无 class/id/style/data-*、无子节点内容（不含空白符）、父容器能直接布局其子元素。比如 <div><p>文本</p></div>，如果 CSS 里没写 div p 这类后代选择器，且 JS 没用 querySelector('div') 抓它，那这层 <div> 就是纯负担。<p>操作流程要倒着来：先在 DevTools Elements 面板右键目标节点 → “Break on > subtree modifications”，交互一遍看有没有 JS 动态操作；再全局搜它的 class 名，确认没被 CSS 或 JS 引用；最后才删整行标签（包括换行缩进）。</p>
<ul><li>连续两层以上仅含一个子节点的 <code><div>（如 <code><div><div><p></p></div></div>）优先删
删完之后为什么页面还是慢？关键盲区在哪
删了 200 行冗余代码，Lighthouse 性能分没变，大概率是因为 DOM 节点数没降下来——你删的是属性，不是节点。真正拖慢解析的是嵌套层级和节点总量：每多 100 个 DOM 节点，HTML 解析平均慢 20–40ms，比加载一个 2KB 的 SVG 还耗时。
更隐蔽的问题是语义断裂。比如把 <div class="main-header"> 直接删成 <code><h1>标题</h1>，但没补上 <header></header>，会导致无障碍树缺失主区域标识，屏幕阅读器无法跳转到主要内容。所以清理必须带替换：用 <header></header> 替 <div class="header">，用 <code><nav></nav> 替 <div class="nav-list">，且确保新标签的子级结构符合规范（如 <code><section></section> 下必须有 <h2></h2> 才合法）。
