直接删掉没用的代码比优化更有效，因90%冗余来自未使用组件、空注释、console.log、未匹配dom的css类及无语义嵌套div；删减可提升性能、可维护性与可访问性。
直接删掉没用的代码，比“优化”更有效。HTML 模板里 90% 的冗余来自复制粘贴带进来的未使用组件、空注释、console.log、未匹配 DOM 的 CSS 类，以及层层嵌套却无语义的 <div>。<h3>删掉所有未调用的 JS 函数和事件监听器</h3>
<p>这些不是性能瓶颈，是维护陷阱——它们不会被触发，但会拖慢 DevTools 查找、干扰代码搜索、增加 bundle 体积。尤其在长期迭代的项目中，<code>addEventListener('click', handleSave) 后续被注释或替换，但监听器没移除，就变成内存泄漏隐患。
- 用浏览器 DevTools 的 Performance 面板 → Record → 勾选 “Event Listener Breakpoints”，点击页面交互，看哪些监听器实际被触发
- 搜索项目中所有
addEventListener，对照 DOM 节点是否存在、事件名是否拼写一致（比如'clik'是常见 typo） - 用
getEventListeners(document.querySelector('#btn'))在 Console 中查某个元素绑定了几个监听器，确认是否重复绑定
用语义化标签替代三层 <div> 嵌套<p>一个按钮被包在 <code><div><div><div><button> 里，不是布局问题，是结构失焦。浏览器要多解析三个节点，辅助技术无法识别意图，CSS 选择器也更难维护。<ul><li>导航菜单优先用 <code><nav><ul><li><a></a></li></ul></nav>，别用 <div class="nav"><div class="list"><div class="item">
<li>真需要包裹做 flex 布局？先试 <code>display: contents，父元素不生成真实 DOM 节点
x-if 或 x-for 强套 <div>，改用 <code><template></template> 标签——它不渲染，只作逻辑容器禁用 HTML 字符串拼接，改用 DOM API 或 DOMParser
element.innerHTML = '<div><p>' + title + '</p></div>' 看似快，实则三重风险：XSS、结构不可控、无法复用。哪怕只是插入纯文本，也该用 textContent。
- 简单文本插入：一律用
el.textContent = title，不是innerHTML - 需创建多个节点（如动态列表项）：用
document.createElement()+appendChild()显式构建 - 必须解析 CMS 返回的富文本 HTML 字符串？用
new DOMParser().parseFromString(html, 'text/html').body.firstChild，而不是直接信任字符串
移除废弃标签、空注释和无意义属性
这类代码不报错，但持续污染可读性与可访问性。比如 <font face="宋体"></font> 已被废弃十多年；<div style="clear:both"> 应由 <code>::after 或 overflow: hidden 替代；空 <!-- --> 注释在生产环境毫无价值。
- 全局搜索并删除：
<font></font>、<center></center>、<u></u>、<b></b>（语义上应优先用<strong></strong>）、class=""、id="" - 用正则
<!--[\s\S]*?-->批量清理注释（注意避开
