语义化标签和扁平结构能显著提升首屏渲染性能。使用等语义标签可跳过class匹配开销；dom深度应≤4层；需清理注释与空节点；关键css内联但不超过14kb原始字节数。
语义化标签能跳过 class 匹配开销
浏览器解析 HTML 时，每遇到一个 <div class="header">，就要创建 DOM 节点、遍历所有 CSS 规则去匹配 <code>.header；而 <header></header> 是内置语义节点，浏览器直接按预设规则归类，不走 class 选择器匹配流程。尤其在列表页有上百个 <div class="item"> 时，这个差异会明显拖慢首屏构建。<p>实际建议：</p>
<ul><li>用 <code><header></header>、<nav></nav>、<main></main>、<section></section>、<aside></aside>、<footer></footer> 替代纯 <div> 包裹<li>避免写 <code><div class="main"> + <code><div class="content"> 这类嵌套，直接用 <code><main><article></article></main>
header { }），而非类名（.header { }），前者无匹配成本扁平结构减少样式继承与层叠计算
三层以上 <div><div><div> 嵌套会让每个子元素的样式计算叠加父级的继承链、层叠权重和伪类状态（比如 <code>:hover 状态需向上冒泡检查）。浏览器要为每个节点维护完整的 computed style 树，嵌套越深，内存占用和重排代价越高。
关键边界：
- 控制 DOM 深度 ≤ 4 层（从
算起） - 把
<div><div><div class="card-body"> 改成 <code><article class="card"><div class="card-body"> —— 用语义容器替代无意义包裹<li>Flex/Grid 布局可直出结构，无需中间 <code><div class="row"><div class="col"> 两层包装<h3>删掉注释和空节点降低 DOM 构建负担</h3> <p>HTML 注释（如 <code><!-- TODO: remove this -->）会被浏览器解析为Comment节点，计入 DOM 树大小；空<div></div>或仅含空白字符的节点同样参与 layout 计算。当页面有几百个这类节点时，首次渲染（FCP）延迟可增加 20–50ms。上线前必查：
- 运行
document.querySelectorAll('comment, script, style').length粗略估算注释/脚本节点数 - 用 DevTools 的 Elements 面板搜索
- 运行
