语义化标签和扁平结构能显著提升首屏渲染性能。使用<header>等语义标签可跳过class匹配开销；DOM深度应≤4层；需清理注释与空节点；关键CSS内联但不超过14KB原始字节数。
语义化标签能跳过 class 匹配开销
浏览器解析 HTML 时，每遇到一个 <div class="header">，就要创建 DOM 节点、遍历所有 CSS 规则去匹配 .header；而 <header> 是内置语义节点，浏览器直接按预设规则归类，不走 class 选择器匹配流程。尤其在列表页有上百个 <div class="item"> 时，这个差异会明显拖慢首屏构建。
实际建议：
- 用
<header>、<nav>、<main>、<section>、<aside>、<footer>替代纯<div>包裹 - 避免写
<div class="main">+<div class="content">这类嵌套，直接用<main><article> - CSS 中优先写元素选择器（如
header { }），而非类名（.header { }），前者无匹配成本
扁平结构减少样式继承与层叠计算
三层以上 <div><div><div> 嵌套会让每个子元素的样式计算叠加父级的继承链、层叠权重和伪类状态（比如 :hover 状态需向上冒泡检查）。浏览器要为每个节点维护完整的 computed style 树，嵌套越深，内存占用和重排代价越高。
关键边界：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 控制 DOM 深度 ≤ 4 层（从
<body>算起） - 把
<div><div><div class="card-body">改成<article class="card"><div class="card-body">—— 用语义容器替代无意义包裹 - Flex/Grid 布局可直出结构，无需中间
<div class="row"><div class="col">两层包装
删掉注释和空节点降低 DOM 构建负担
HTML 注释（如 <!-- TODO: remove this -->）会被浏览器解析为 Comment 节点，计入 DOM 树大小；空 <div></div> 或仅含空白字符的节点同样参与 layout 计算。当页面有几百个这类节点时，首次渲染（FCP）延迟可增加 20–50ms。
上线前必查：
- 运行
document.querySelectorAll('comment, script, style').length粗略估算注释/脚本节点数 - 用 DevTools 的 Elements 面板搜索
<!--，批量清理开发期残留 - 避免模板引擎输出空
<div>{{ item.title || '' }}</div>—— 加条件判断或用display: none替代空占位
关键 CSS 内联但不超过 14KB 解压前体积
内联关键 CSS 是为了跳过网络请求，但超过 14KB（未压缩原始字节数）会触发浏览器延迟解析整个 <style> 块，反而卡住首屏绘制。这不是 gzip 后的大小，而是 HTML 文件里 <style> 标签内的原始字符数。
实操红线：
- 只提取首屏可见区域用到的规则：导航栏、标题、首张图容器，不含折叠区、弹窗、分页按钮
- 用
critters（Vite 插件）或penthouse自动提取，别手写 —— 容易漏掉:focus-visible、@media (min-width: 768px)里的声明 - 若提取后接近 14KB，优先砍掉非必要动画（如
transform: scale(1.02)），而不是强行压缩混入无关规则
真正容易被忽略的是：语义标签和扁平结构不是“让代码更好看”，而是让浏览器少做几轮匹配、少建几个节点、少跑一遍继承链。这些优化不改变视觉，但会在低端设备或弱网下暴露真实收益 —— 有时候快 100ms，就是用户没放弃加载的那 100ms。
