html结构直接影响lcp和cls：lcp常卡在首屏img或h1，但真正拖慢它的是前置冗余嵌套、未闭合标签或语义错误；cls超80%源于img缺width/height或div模拟button引发重排。
为什么HTML结构直接影响LCP和CLS
页面最大内容绘制（LCP）常卡在首个<img>或<h1></h1>上，但真正拖慢它的，是它前面冗余的嵌套、未闭合的标签、或错误的语义层级；累计布局偏移（CLS）80%以上源于<img>没设width/height，或用<div>模拟<code><button></button>导致样式重算。浏览器解析HTML时，每多一层无意义<div>就多一次DOM树重建，而语义错误会触发额外的可访问性校验与回退渲染逻辑。<h3>删掉哪些<code><div>能立竿见影<p>不是所有<code><div>都该删，重点清理三类：<ul>
<li>纯包裹型<code><div class="container"><div class="row"><div class="col">…</div></div></div>——改用<main></main> + Flex/Grid直接布局
display: none切换的<div>——初始不渲染，用JS动态<code>insertAdjacentHTML插入<div id="debug-overlay">或<code><!-- test: remove before prod -->——构建流程中必须剔除注意：<div>本身不慢，慢的是它引发的CSS选择器匹配爆炸（如<code>div div div .btn）和DOM遍历深度增加。
<img>和<iframe></iframe>的HTML级防抖写法
不靠JS，仅靠HTML属性就能压住CLS和首屏阻塞：
-
<img>必须带width和height（哪怕只是占位值），否则加载时重排不可避免 - 用
loading="lazy"但避开首屏——首屏<img>禁用该属性，否则可能延迟LCP -
<iframe></iframe>加title属性（无障碍要求），且用referrerpolicy="no-referrer"减少跨域请求开销 - 避免
<iframe src="..."></iframe>内联写法，改为JS动态设置src，防止初始HTML解析就发起第三方请求
语义化标签对渲染流水线的真实影响
浏览器对<header></header>、<nav></nav>、<main></main>等标签有原生解析优化：它们被识别为“导航锚点”，会提前建立渲染上下文，比<div role="navigation">少一次ARIA角色推导。但错误使用反而更糟：<ul>
<li>
<code><h2></h2>不能出现在<section></section>外——破坏大纲算法，迫使浏览器重建文档结构树
<article></article>内嵌<aside></aside>没问题，但<aside></aside>放<footer></footer>里会触发重定位逻辑<picture></picture>必须配<source></source> + <img> fallback，缺一不可，否则降级失败直接白屏最易被忽略的点：HTML结构优化不是“越语义越好”，而是“在正确位置用正确标签”。一个错位的<main></main>比十个<div>更伤性能。</div>
