问题不完整，无法确定具体询问对象或背景，因此无法给出准确回答。
为什么放
因为浏览器必须等 CSSOM 构建完成，才能合成渲染树——哪怕 HTML 已解析完，没 CSSOM 就不画像素。这不是“加载慢”，而是关键路径卡在 DOM + CSSOM 同步就绪这一步。
常见错误现象：Flash of Unstyled Content（FOUC）或整页白屏超过 1s；Network 面板显示 style.css 已返回 200，但 Elements 面板里样式未生效。
-
<link rel="stylesheet">默认是阻塞首次绘制的，即使它放在最底部 - 没加
media属性（如media="print"）时，浏览器一律当media="all"处理，视为关键资源 - CSS 文件里含
@import会串行加载，进一步拉长 CSSOM 构建时间 - 大量深层嵌套选择器（如
article section div p em）不拖慢解析，但显著增加匹配开销和重排压力
如何让骨架屏不跳、不闪、不卡 hydration
骨架屏不是动效玩具，是 SSR/CSR 协同的关键契约。结构错一丁点，hydration 就崩，用户看到的是内容位移或空白块。
- 骨架 HTML 必须和服务端返回的真实 DOM 完全同构：节点层级、
class名、顺序、数量严格一致 - 禁用
height: 100%——父容器无高度时它坍缩为 0；改用固定值（如height: 24px）或aspect-ratio - 图片占位统一用
<div class="skeleton-img"></div>，不用<img src="data:">，后者仍触发解码逻辑 - 动画只允许用
background-position（配合linear-gradient）或transform；禁用width、height、left、top - 真实内容挂载前，骨架 DOM 必须被移除或替换，不能靠
v-show或opacity: 0隐藏
Flex/Grid 主容器为何总失效
不是子元素没写 flex: 1，而是父容器根本没开启 Flex 上下文——这是最常被忽略的底层前提。
- 根容器（如
或包裹层）必须先设display: flex和min-height: 100vh，否则子项的flex: 1无效 - 垂直堆叠结构（
header+main+aside+footer）优先用flex-direction: column，比float或position: absolute更稳 - 侧边栏固定宽、内容区自适应？用
flex: 0 0 240px+flex: 1，比百分比更可靠 - 给每个 flex 项目加
min-width: 0——否则内部长 URL 或中文连续无空格文本会撑破容器，overflow: hidden不生效
语义化标签不是“加分项”，是协作底线
用 <div class="header"> 替代 <code><header></header>，表面能加样式，实际埋下三颗雷：无障碍支持失效、CSS 选择器不可预测、后期重构成本翻倍。
-
<main></main>必须唯一，且不能嵌套在<section></section>或<article></article>内 -
<nav></nav>应包裹导航链接集合，不是所有带链接的容器都叫 nav - CSS 选择器应基于标签和属性（如
nav a[href]），而非依赖易变的 class（如.menu-link） - ID 选择器只用于 JS 锚点或 ARIA 关联，禁止用于样式控制——它天然唯一，无法复用，还容易和
document.getElementById隐式耦合
真正难的不是写对一行代码，而是让结构在无样式时仍可读、可访问、可预测。一旦关掉 CSS，满屏 <div> 堆叠，说明语义已丢失，后续加 a11y 或 SEO 都得返工。</div>
