必须先验证再删除：在Elements面板右键节点设“Break on Attribute modifications”观察JS是否修改其属性，全局搜索id/class/data属性在JS/CSS中是否被querySelector、addEventListener或属性选择器引用，再结合vscode-html-validate插件检测未引用id和废弃标签。
直接删 index.html 里的冗余节点不安全——多数“无效”元素其实被 JS 或 CSS 隐式引用，硬删会触发 Cannot read property 'style' of null 或破坏布局。自动化清理必须先做依赖判定，再选工具执行。
如何判断某个 HTML 节点是否真无效？
不能只看有没有内容或 class。关键要验证它是否在运行时被读取：
- 在 Chrome DevTools 的 Elements 面板右键节点 → Break on → Attribute modifications，刷新页面，看是否被 JS 修改过属性（比如
style.display、class） - 在 Console 执行
document.querySelectorAll('div[id="legacy-banner"], .old-loader, [data-temp]')，确认是否还存在于 DOM 中 - 全局搜索该节点的
id、class、data-属性值，检查是否出现在 JS 的querySelector、getElementById、addEventListener或 CSS 的属性选择器（如input[data-validated] + .error）里 - 用
vscode-html-validate插件扫描静态问题："no-unused-id": "error"和"no-unknown-elements": "warn"能标出未被引用的id和已废弃标签（如<center></center>）
哪些工具适合自动化清理，且不破坏运行时逻辑？
选工具前先明确目标：是清理“静态冗余”（注释、空标签、过时标签），还是“动态安全”（防 XSS、白名单过滤）？两者策略完全不同：
-
tidy-html5：适合修复语法错误、闭合缺失标签、缩进标准化。命令tidy -i -w 120 -asxhtml index.html可就地格式化，但不会删任何节点——它默认保守，只修不删 -
markup-de-crapulator：专注移除广告脚本、跟踪像素、无意义div嵌套，适合批量处理爬虫抓取的脏 HTML，但对项目内index.html过于激进，容易误删 -
sanitize-html（Node.js）：白名单驱动，可精确配置保留哪些标签/属性，适合富文本输入清洗；但若用于index.html入口文件，需手动写规则，否则会把<script></script>或<link>当成不安全内容干掉 -
HtmlSanitizer（浏览器端）：仅适用于用户提交内容，不能处理构建时的index.html——它没 API 接入构建流程，也不支持文件读写
怎么安全地批量删注释、空标签和废弃属性？
人工删易漏、难回溯。命令行+正则更可控，但要注意边界：
立即学习“前端免费学习笔记（深入）”；
- 删单行 HTML 注释：
sed -i '/<!--.*-->/d' index.html（Linux/macOS）；跨多行注释用perl -0777 -i -pe 's/<!--.*?-->//gs' index.html - 删空标签（不含文本、子节点、属性）：
perl -0777 -i -pe 's/]*>//g' index.html，注意别匹配到<script></script>或带id的容器 - 删废弃属性（如
align、border）：sed -i 's/ align=[^ >]*//g; s/ border=[^ >]*//g' index.html，但别碰data-或自定义属性 - 每次操作前建 Git 分支：
git checkout -b cleanup-index-202606，删完立刻npm run dev测试首屏加载、JS 初始化、锚点跳转
最常被忽略的是构建工具注入——Vite 的 vite-plugin-html、Webpack 的 html-webpack-plugin 会在打包时往 index.html 插入内容。直接改源文件，下次构建可能自动还原。得先查插件配置，再决定清理时机。
