高性能 html 的核心是减少浏览器计算负担：用语义化标签跳过 class 匹配、控制 dom 深度≤4 层以降低重排扩散、删除空节点和注释减轻 dom 构建压力，三者协同可使首屏渲染压力下降 30% 以上。
直接结论：高性能 HTML 的核心不是“写得多”，而是“让浏览器算得少”——语义化标签跳过 class 匹配、扁平结构减少继承链计算、删空节点降低 DOM 构建负担，这三件事做完，首屏渲染压力通常下降 30% 以上。
用 <header></header> 替代 <div class="header"> 能跳过 CSS 类匹配<p>浏览器解析 <code><div class="header"> 时，必须遍历全部 CSS 规则去比对 <code>.header；而 <header></header> 是内置语义元素，浏览器直接按预设规则归类，不走选择器匹配流程。尤其在商品列表页有上百个 <div class="item"> 时，class 匹配开销会明显拖慢首屏 DOM 构建。<ul><li>优先使用 <code><header></header>、<nav></nav>、<main></main>、<section></section>、<article></article>、<footer></footer> 替代纯 <div>
<li>CSS 中优先写 <code>header { } 这类元素选择器，而非 .header { }
<div class="main"><div class="content"> 这类嵌套，直接用 <code><main></main> + 内容DOM 深度控制在 ≤4 层，否则重排扩散范围指数级扩大
每多一层嵌套，浏览器就要为每个子元素维护更长的继承链、层叠权重和伪类冒泡路径。例如 <div><div><div>
<p> 这种结构，JS 修改 <code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 的 offsetTop 或触发父容器重排时，浏览器需向上遍历整个祖先链，且 display: flex 或 grid 容器内动态增删子项时，深层嵌套会让重排波及范围失控。
- 从
开始数，DOM 深度 ≤4 层（算第 1 层） - 把
<div class="row"><div class="col"><div class="card-body"> 简化为 <code><div class="card-body"><li>警惕 UI 库自动生成的 wrapper，如 <code><div data-v-xxx>，用 DevTools Layers 面板确认是否形成冗余渲染子树<li>兼容性允许时，用 <code>display: contents让无意义父容器“消失”在渲染树中 - 上线前运行
document.querySelectorAll('comment, script, style').length快速估算冗余节点数 - 用 DevTools Elements 面板搜索
删掉注释、空 <div> 和未使用的 <code><script></script> 节点
HTML 注释（如 <!-- TODO -->）会被解析为 Comment 节点，计入 DOM 树大小；空 <div></div> 或仅含空白字符的节点同样参与 layout 计算。当页面有几百个这类节点时，FCP 可延迟 20–50ms。
