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