高性能 HTML 的核心是减少浏览器计算负担：用语义化标签跳过 class 匹配、控制 DOM 深度≤4 层以降低重排扩散、删除空节点和注释减轻 DOM 构建压力，三者协同可使首屏渲染压力下降 30% 以上。
直接结论：高性能 HTML 的核心不是“写得多”，而是“让浏览器算得少”——语义化标签跳过 class 匹配、扁平结构减少继承链计算、删空节点降低 DOM 构建负担，这三件事做完，首屏渲染压力通常下降 30% 以上。
用 <header> 替代 <div class="header"> 能跳过 CSS 类匹配
浏览器解析 <div class="header"> 时，必须遍历全部 CSS 规则去比对 .header；而 <header> 是内置语义元素，浏览器直接按预设规则归类，不走选择器匹配流程。尤其在商品列表页有上百个 <div class="item"> 时，class 匹配开销会明显拖慢首屏 DOM 构建。
- 优先使用
<header>、<nav>、<main>、<section>、<article>、<footer>替代纯<div> - CSS 中优先写
header { }这类元素选择器，而非.header { } - 避免
<div class="main"><div class="content">这类嵌套，直接用<main>+ 内容
DOM 深度控制在 ≤4 层，否则重排扩散范围指数级扩大
每多一层嵌套，浏览器就要为每个子元素维护更长的继承链、层叠权重和伪类冒泡路径。例如 <div><div><div><p> 这种结构，JS 修改 <p> 的 offsetTop 或触发父容器重排时，浏览器需向上遍历整个祖先链，且 display: flex 或 grid 容器内动态增删子项时，深层嵌套会让重排波及范围失控。
- 从
<body>开始数，DOM 深度 ≤4 层（<body>算第 1 层） - 把
<div class="row"><div class="col"><div class="card-body">简化为<div class="card-body"> - 警惕 UI 库自动生成的 wrapper，如
<div data-v-xxx>，用 DevTools Layers 面板确认是否形成冗余渲染子树 - 兼容性允许时，用
display: contents让无意义父容器“消失”在渲染树中
删掉注释、空 <div> 和未使用的 <script> 节点
HTML 注释（如 <!-- TODO -->）会被解析为 Comment 节点，计入 DOM 树大小；空 <div></div> 或仅含空白字符的节点同样参与 layout 计算。当页面有几百个这类节点时，FCP 可延迟 20–50ms。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 上线前运行
document.querySelectorAll('comment, script, style').length快速估算冗余节点数 - 用 DevTools Elements 面板搜索
<!--批量清理开发期残留 - 模板引擎中避免
<div>{{ item.title || '' }}</div>，改用条件判断或display: none - 移除未被任何逻辑调用的
<script>或<style>标签，它们仍要进 DOM 树
关键 CSS 内联但原始字节数 ≤14KB，超了反而卡首屏
内联关键 CSS 是为了跳过网络请求，但超过 14KB（HTML 文件里 <style> 标签内的原始字符数，非 gzip 后大小）会触发浏览器延迟解析整个 <style> 块，因为超出 TCP 初始拥塞窗口，多一个 RTT。
- 只提取首屏可见区域用到的规则：导航栏、标题、首张图容器，不含折叠区、弹窗、分页按钮
- 别手动拼凑，用
critters（Vite 插件）或penthouse自动提取 - 检查方法：复制
<style>内容到编辑器，看字符数是否 ≤14000 - 内联后务必验证：移除外部 CSS 引用，页面首屏是否仍正常渲染
最容易被忽略的是 DOM 深度与空节点的组合效应——单看一个空 <div> 似乎无害，但若它嵌套在 5 层结构里，又出现在 200 行列表中，就会成倍放大解析和布局计算负担。优化不是一步到位，而是每次提交前顺手删两个注释、压平一层 wrapper、换一个语义标签。
