语义化标签和扁平结构是首屏渲染快慢的关键分水岭，能直接减少浏览器样式匹配与布局计算开销；优先使用<header><nav><main>等原生语义标签替代<div class>，控制DOM深度≤4层，删除注释与空节点，并用flex/grid直出布局。
语义化标签和扁平结构能直接减少浏览器样式匹配与布局计算的开销，不是“锦上添花”，而是首屏渲染快慢的关键分水岭。
用、代替这类写法浏览器解析 <div class="header"> 时，必须遍历所有 CSS 规则去匹配 .header；而 <header> 是原生语义节点，无需 class 匹配，直接归类。尤其在商品列表页有 200 个 <div class="item"> 时，这部分开销会明显拖慢 DOM 构建。
- 优先使用
<header>、<nav>、<main>、<section>、<aside>、<footer>
- CSS 中写
header { } 比 .header { } 更高效——前者无选择器匹配成本
- 避免嵌套式语义标签，比如
<div class="main"><div class="content">，直接用 <main> 即可
把 DOM 深度控制在 ≤4 层（从 <body> 算起）
每多一层嵌套，浏览器就要为子元素维护更长的继承链、层叠权重和伪类冒泡路径（比如 :hover 需向上逐层检查）。深度超 4 层后，computed style 树内存占用和重排代价会非线性上升。
- 把
<div><div><div class="card-body"> 改成 <div class="card-body">
- 用
display: flex 或 display: grid 直出布局，跳过 <div class="row"><div class="col"> 这类两层包装
- 检查 DevTools 的 Elements 面板，按
Ctrl+Shift+P 输入 “Show DOM Tree” 可直观看到当前深度
删掉注释和空节点，别让它们参与 layout 计算
<!-- TODO: remove this --> 和 <div></div> 都会被解析为真实 DOM 节点，计入树大小并参与 layout 流程。几百个这样的节点会让 FCP 延迟 20–50ms。
立即学习“前端免费学习笔记（深入）”；
- 构建阶段用
html-minifier-terser 自动移除注释和空白文本节点
- 避免手写
<div class="spacer"></div> 来占位，改用 margin 或 gap
- 模板中条件渲染为空时，确保不输出空标签（如 Vue 的
v-if、React 的 && 判断）
真正卡顿的根源往往不在 JS 执行或网络请求，而在 HTML 结构本身——一个没意义的 <div> 嵌套，可能比一段低效的循环更拖慢首屏。优化它不需要新工具，只需要写代码时多问一句：“这个标签，浏览器真的需要它吗？”
这类写法把 DOM 深度控制在 ≤4 层（从
浏览器解析 <div class="header"> 时，必须遍历所有 CSS 规则去匹配 .header；而 <header> 是原生语义节点，无需 class 匹配，直接归类。尤其在商品列表页有 200 个 <div class="item"> 时，这部分开销会明显拖慢 DOM 构建。
- 优先使用
<header>、<nav>、<main>、<section>、<aside>、<footer> - CSS 中写
header { }比.header { }更高效——前者无选择器匹配成本 - 避免嵌套式语义标签，比如
<div class="main"><div class="content">，直接用<main>即可
把 DOM 深度控制在 ≤4 层（从 <body> 算起）
每多一层嵌套，浏览器就要为子元素维护更长的继承链、层叠权重和伪类冒泡路径（比如 :hover 需向上逐层检查）。深度超 4 层后，computed style 树内存占用和重排代价会非线性上升。
- 把
<div><div><div class="card-body">改成<div class="card-body"> - 用
display: flex或display: grid直出布局，跳过<div class="row"><div class="col">这类两层包装 - 检查 DevTools 的 Elements 面板，按
Ctrl+Shift+P输入 “Show DOM Tree” 可直观看到当前深度
删掉注释和空节点，别让它们参与 layout 计算
<!-- TODO: remove this --> 和 <div></div> 都会被解析为真实 DOM 节点，计入树大小并参与 layout 流程。几百个这样的节点会让 FCP 延迟 20–50ms。
立即学习“前端免费学习笔记（深入）”；
- 构建阶段用
html-minifier-terser自动移除注释和空白文本节点 - 避免手写
<div class="spacer"></div>来占位，改用margin或gap - 模板中条件渲染为空时，确保不输出空标签（如 Vue 的
v-if、React 的&&判断）
真正卡顿的根源往往不在 JS 执行或网络请求，而在 HTML 结构本身——一个没意义的 <div> 嵌套，可能比一段低效的循环更拖慢首屏。优化它不需要新工具，只需要写代码时多问一句：“这个标签，浏览器真的需要它吗？”
