语义化标签能加快渲染速度，因其自带隐式ARIA角色和默认样式上下文，便于浏览器快速归类优化，且减少DOM节点数与低效CSS选择器匹配；移动端部分浏览器还会优先分配<main>内容的渲染线程资源。
为什么语义化标签能加快渲染速度
浏览器解析 HTML 时，会为每个元素生成 DOM 节点并建立样式树；语义化标签（如 <header>、<nav>、<main>、<article>）自带隐式 ARIA 角色和默认样式上下文，比纯 <div> 更易被快速归类和优化处理。尤其在移动端，部分浏览器对 <main> 内容会优先分配渲染线程资源。
常见错误是用一堆 <div class="wrapper"><div class="inner"><div class="content"> 套娃，不仅增加 DOM 节点数，还让 CSS 选择器不得不写成 .wrapper .inner .content 这类低效组合——浏览器需从右往左逐层回溯匹配。
- 用
<section>替代<div class="section">，避免无意义 class 层级 - 确保
<h1>到<h6>层级连续，跳级（如<h2>后直接<h4>）会影响屏幕阅读器和搜索引擎的结构推断 - 慎用
<div role="button">：原生<button>自带焦点、键盘交互与可访问性，而手动加 role 往往漏掉tabindex或aria-pressed
CSS Grid / Flexbox 布局如何减少重排重绘
传统浮动（float）或绝对定位（position: absolute）容易触发全局重排（reflow），尤其当父容器尺寸变化时；而 display: grid 和 display: flex 是基于布局算法的“声明式”模型，浏览器可在不遍历子元素的情况下计算出最终位置，大幅降低重排开销。
典型陷阱是把 Grid 当成“万能表格替代品”，在大量动态插入项的列表中滥用 grid-template-rows: repeat(auto-fill, minmax(...)) ——每次新增项都会触发整个网格重新计算行高和轨道分布。
立即学习“前端免费学习笔记（深入）”；
- 固定高度/宽度的卡片列表，优先用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))))+grid-auto-rows: 200px，显式约束轨道 - Flex 容器中避免对子项频繁设置
flex-basis或order，这些属性会强制单次重排 - 动画场景下，只对
transform和opacity做过渡——这两者走合成层（compositor layer），不触发重排重绘
关键 CSS 内联后仍白屏？检查这三处
内联关键 CSS（Critical CSS）本意是消除首屏渲染阻塞，但若页面仍白屏或闪动，问题往往不在压缩或提取逻辑，而在执行链路断裂：
-
<style>标签未放在<head>最顶部，被<link rel="preload">或<script>挡住，导致浏览器延迟解析 - 内联 CSS 中包含
@import或url()引用外部字体/图片，这些请求仍会阻塞渲染（即使路径正确） - 关键 CSS 体积超 14KB（HTTP/1.1 下 TCP 初始拥塞窗口限制），导致分包传输，第二段需等待 ACK 才能继续解析
验证方法：打开 DevTools → Network → 筛选 document 类型，看 Content Download 时间是否远长于 DOMContentLoaded；若接近，说明内联 CSS 本身成了瓶颈。
HTML 骨架（skeleton）与 CSS 协作的真实成本
骨架屏不是“加个灰色 div 就完事”。它依赖 HTML 结构稳定性与 CSS 渲染时序的精确配合：若骨架用 <div class="skeleton-card"> 实现，但真实内容用 <article class="card">，且两者样式规则分离（比如骨架靠 .skeleton-card，内容靠 .card），就极易出现布局偏移（layout shift）——CLS（Cumulative Layout Shift）分数飙升。
更隐蔽的问题是：骨架元素若未设明确宽高（如仅靠 padding 撑开），在字体加载完成前会塌陷，造成两次重排。
- 骨架结构必须与真实 DOM 结构完全一致（同标签、同嵌套、同 class 名），CSS 用同一套规则控制显示/隐藏
- 所有骨架元素需有
width、height或aspect-ratio，禁用依赖字体加载的line-height或em单位撑高 - 用
opacity: 0+visibility: hidden控制骨架显隐，而非display: none——后者会清空渲染树节点，切换时触发重建
最常被忽略的是骨架与异步资源加载的竞态：骨架显示后，JS 还没拿到数据，但用户已开始滚动，此时懒加载图片或组件可能覆盖骨架区域，造成视觉撕裂。必须用 IntersectionObserver 主动监听骨架容器的可见性，并延迟真实内容挂载直到容器进入视口。
