直接删掉冗余嵌套比压缩空格更有效；dom节点每减10%，解析与布局耗时显著下降，因浏览器需为每个节点执行样式继承、布局计算等单线程操作。
直接删掉那些没用的 <div> 嵌套，比压缩空格管用十倍。DOM 节点数每减少 10%，解析和布局耗时就可能下降明显——这不是估算，是浏览器真实行为。
<h3>为什么 DOM 节点数比 HTML 文件体积更关键</h3>
<p>浏览器解析 HTML 是单线程顺序执行，每个标签都得生成节点、计算继承样式、参与布局。哪怕只是多一层 <code><div class="wrapper"><div class="inner"><p>...</p></div></div>，也会让 DOM 树更深、样式匹配更慢、重排开销更大。
- 语义化标签（如
<header></header>、<nav></nav>、<main></main>）本身不“加速”，但它们天然减少冗余包裹，且现代浏览器对这些节点的解析路径做了优化 - 用
display: flex或display: grid替代浮动或绝对定位布局，能大幅降低因层级错乱导致的强制同步布局（layout thrashing） - 开发时留下的测试标签（比如
<div id="debug-overlay">）必须在构建阶段移除，它们即使 <code>display: none，仍会进入 DOM 树并参与 CSSOM 匹配哪些结构改动能立刻见效
不用等构建工具或框架升级，改几行 HTML 就能看到 LCP 和 TTI 变化：
- 把
<div><div><div><p>标题</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" 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 rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div></div></div>改成<h1>标题</h1>—— 语义正确 + 节点减 3 个 + 默认有样式 + 屏幕阅读器友好 - 删除所有仅用于撑开间距的空
<div>，改用 <code>margin或gap；CSS Grid 的gap不触发重排，<div style="height: 20px"></div>会 <table> 仅用于真实表格数据；展示型布局（如卡片网格）强行用 table 会导致 DOM 树异常臃肿，且无法被 IntersectionObserver 高效监听 <h3>内联 SVG 与图片占位结构的取舍</h3> <p>图标类资源用内联 <code><svg></svg>确实省一次请求，但前提是 SVG 代码足够轻量（建议 ≤ 2KB）。否则它会拖慢 HTML 解析，尤其当它出现在或首屏附近时。- 复杂图标（含滤镜、渐变、大量 path）优先走
<img src="icon.svg">或雪碧图，避免阻塞 parser - 懒加载图片别只写
loading="lazy"就完事：必须配合width和height属性，否则会触发 layout shift（CLS 暴涨） - 占位结构（如骨架屏）建议用纯 CSS 实现（
::before+background），而非插入一堆空<div> —— 后者增加 DOM 节点，前者不进树 <p>最容易被忽略的是：HTML 结构优化不是“写得漂亮”，而是“让浏览器少做一点”。一个没闭合的 <code><li>、一处错误嵌套的<section></section>，都可能让浏览器进入容错模式，重建 DOM 子树——这种成本远高于你省下的那几百字节。
- 复杂图标（含滤镜、渐变、大量 path）优先走
- 把
