语义化标签是解析效率的硬开关，能提升DOM构建效率、辅助技术识别和SEO权重判断；深层嵌套、冗余属性和低效操作会显著降低渲染性能。
语义化标签不是“锦上添花”，而是解析效率的硬开关
浏览器解析 HTML 时，语义标签（如 <main></main>、<article></article>、<nav></nav>）能直接触发更高效的 DOM 构建路径。用 <div class="main"> 替代 <code><main></main>，看似无差别，实则让浏览器多做一层 class 匹配和样式推导——尤其在首屏渲染阶段，这种开销会被放大。
-
<main></main>必须且只能出现一次，且不能嵌套在<section></section>或<article></article>内；误嵌套会导致辅助技术跳过核心内容 -
<article></article>适用于可独立分发的内容（如博客正文、新闻稿），而<section></section>仅表示主题分组（如“相关推荐”下并列三项），混用会误导搜索引擎判断内容权重 - 用
<header></header>替代<div class="header"> 后，Chrome DevTools 的 “Accessibility” 面板会自动识别导航区域，无需额外 ARIA 标注<h3>DOM 嵌套超过三层，CSS 选择器匹配成本指数级上升</h3> <p>一个 <code>.sidebar .widget .content p选择器，在 DOM 深度为 5 层时，浏览器需回溯匹配 5×4×3 次；若改用aside[role="complementary"] p，匹配路径缩短为线性扫描。这不是理论值——实测某电商商品列表页，将<div><div><div><ul><li>...</li></ul></div></div></div>改为<section><ul><li>...</li></ul></section>后，滚动帧率从 42fps 提升至 59fps。- 用 Chrome DevTools 的 Elements 面板按
Ctrl+Shift+C，悬停查看节点深度，重点排查连续<div> 套嵌区域<li>Flex/Grid 布局可直接砍掉 2–3 层包裹容器：三栏布局用 <code>display: grid+grid-template-columns，无需<div class="row"> + 三个 <code><div class="col"> <li>动态插入大量列表项时，必须用 <code>DocumentFragment批量 append，避免每加一项都触发一次 layout reflow - 大型文章页的段落列表、仪表盘的卡片网格、后台管理的数据表格，都应主动拆分为多个
<section></section>，而非塞进一个<div id="content"><li>服务端渲染（SSR）场景下，若后端一次性吐出 200 行 <code><tr>，建议前端用 IntersectionObserver 分批 hydrate，首屏只激活可视区 30 行<li>使用 <code>getBoundingClientRect()判断元素是否进入视口时，避免在 scroll 事件里直接调用——节流到requestIdleCallback更稳妥 - 删除所有空
class=""、id=""、data-*=""属性，它们占体积且干扰 DevTools 定位 - 移除开发期遗留的 HTML 注释（
<!-- TODO: refactor -->），它们被完整加载进 DOM 树，哪怕不可见 - 用
html-minifier-terser时，只开removeComments: true和collapseWhitespace: true，禁用引号移除和布尔属性合并
单个容器子元素超 50 个，滚动卡顿会变得肉眼可见
这不是玄学阈值。浏览器对单个父节点下的子节点维护一个内部索引表，超过 50 个后，重排（reflow）计算复杂度跃升。尤其当这些子元素含内联样式或 JS 绑定事件时，问题更明显。
HTML 压缩不是删空格，而是剔除真正无意义的解析负担
盲目启用
removeAttributeQuotes或collapseBooleanAttributes可能导致属性值含空格或特殊字符时解析失败（如class="btn btn-primary"被压成class=btn btn-primary，浏览器只认第一个单词）。真正的压缩收益来自清理“机器不读但人写了”的冗余。立即学习“前端免费学习笔记（深入）”；
关键点往往藏在细节里：比如
<main></main>的唯一性约束、DocumentFragment的必要性、以及空属性对 DOM 树的实际污染——这些不是“写对就行”的规范，而是直接影响帧率与首屏时间的执行路径。 - 用 Chrome DevTools 的 Elements 面板按
