删冗余HTML比配置优化更有效：无属性、单子节点、仅撑高的div可删；语义化替换需同步更新JS选择器、表单关联和焦点流；模板中90%冗余来自未用组件、空注释和调试残留。
冗余 HTML 不是“写得不够漂亮”的问题，而是浏览器解析时多花的 20–40ms/100 个节点——删掉一层没用的 <div>，比加一堆优化配置更直接有效。<h3>怎么一眼识别该删哪层 <code><div><p>打开浏览器开发者工具 → Elements 面板，鼠标悬停在某个 <code><div> 上：<ul>
<li>它没 <code>class、没 id、没 style、没事件监听、没 data- 属性，且子元素能被父容器或 CSS 正确布局 → 大概率就是冗余的
<div>（如 <code><div><div><p>内容</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill4293" title="Doc To HTML">Doc To HTML</a>
<p>使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></div></div>）优先删<div>，改用 <code>min-height 或 paddingclass="clearfix" 的 <div>，改用 <code>overflow: hidden 或伪元素清除浮动常见误判：以为“这个 <div> 用来居中”，其实 <code>display: flex 或 text-align: center 就够；留着“方便以后加动画”，但没加之前它就是纯负担。
立即学习“前端免费学习笔记（深入）”；
用语义化标签替代时，为什么 JS 会突然失效
把 <div class="nav"> 改成 <code><nav></nav> 本身不会出错，但 JS 绑定可能断掉：
- 原 JS 用
document.querySelector('.nav')，改完后没同步更新选择器 → 找不到节点，事件不触发 -
<label></label>的for属性没指向<input>的id→ 屏幕阅读器找不到输入框 - 用
<table> 做商品列表，直接删掉改用 <code><div> + <code>flex→ 键盘 Tab 导航、单元格聚焦、排序逻辑全丢语义化不是替换完就完事，必须同步检查 JS 选择器、表单关联、焦点流是否仍成立。
删掉没用的代码，比“优化”更有效
HTML 模板里 90% 的冗余来自复制粘贴带进来的未使用组件、空注释、调试残留的
console.log：- 搜索
{{、{%、、<code>@@include等模板语法起始符，连同对应结束符一并删除 - 删掉形如
<!-- START: hero-section -->这类区块注释——除非你真靠它做构建时条件注入 - 运行
document.querySelectorAll('div:not([class]):not([id]):not([data-*])').length查纯空壳<div>，逐个确认是否可删<li>用 DevTools 的 Coverage 工具看哪些 CSS 规则灰掉了，没执行的整条删，别信人工标记的 <code>/* unused */ -
document.querySelector('.user-card .avatar img')从 4 层降到 2 层，匹配速度提升不止一倍 - 批量插入时，
DocumentFragment不再需要模拟深层父链，创建和挂载更快 - 读取
offsetTop或getBoundingClientRect()不再频繁触发强制同步布局（因为父链短，回溯快） - 事件委托绑定在
document.body时，冒泡路径缩短，响应更及时
特别注意
document.addEventListener('DOMContentLoaded', )内部嵌套的未使用模块——别只删外层函数，漏掉里面层层包裹的if (false)分支。DOM 深度降下来了，JS 操作真的变快了吗
结构变浅后，JS 的每一次 DOM 访问都变得更轻量，但收益点容易被忽略：
真正关键的不是节点总数，而是
document.body.children[0].children[0].children[0]这种链式访问是否还存在——它暴露的是结构控制力的缺失，不是单纯删几个标签就能解决的。 - 搜索
