异步加载CSS不阻塞首屏渲染但会引发FOUC和CLS：因样式延迟注入，元素按无样式尺寸占位，后续重排重绘导致布局偏移；需通过内联关键样式、预设字体/行高/容器尺寸及启用SSR样式提取来缓解。
异步加载CSS会阻塞FOUC但不预留布局空间
浏览器遇到 <link rel="stylesheet"> 时默认同步解析，而用 rel="preload" + onload 或动态 insertRule 异步注入 CSS，会导致样式表延迟生效。此时 HTML 已完成初始渲染（无样式或仅内联样式），文本、按钮、卡片等元素按“无样式 fallback”尺寸占位；等 CSS 注入后，字体大小、行高、padding、margin 突然变化，元素重排重绘——但浏览器不会回溯修正已计算的布局位置，直接触发 CLS。
CSS-in-JS 库（如 Emotion、Styled Components）动态注入的隐患
这类库常在组件挂载时才生成并插入 <style></style> 标签，尤其在 SSR 场景下，客户端水合（hydration）前 DOM 已按无样式状态渲染。常见表现是：首屏文字突然变大/换行、按钮高度跳变、卡片边距收缩，所有这些都会贡献 CLS。
- 服务端未输出对应
<style></style>标签（即未做 SSR 样式提取），客户端首次渲染完全无样式 - 组件使用
useLayoutEffect或useEffect触发样式注入，时机晚于 layout 计算 - 动态主题切换时，旧样式未及时移除，新样式叠加导致尺寸冲突
font-face 加载延迟引发的文本回流
若 CSS 中定义了 @font-face 但未配 font-display: optional 或 swap，浏览器会在字体加载完成前用后备字体渲染文本，加载完成后又替换为实际字体——不同字体的字宽、行高等天然差异，导致段落高度突变、换行点偏移，进而推挤下方内容。
- 未声明
font-display时，默认行为是block（FOIT），空白期长且不可控 - 即使用了
swap，若后备字体与目标字体宽高比差异大（如系统默认serifvs 自定义无衬线体），仍会引发 CLS - 字体加载完成后的重排不触发 layout shift 检测回调，Lighthouse 可能漏报，但真实用户感知明显
如何让异步 CSS 不破坏布局稳定性
核心不是“禁用异步”，而是确保关键布局属性在首次绘制前已就位。重点守住字体、行高、容器尺寸三类属性：
立即学习“前端免费学习笔记（深入）”；
- 将
font-family、line-height、font-size提前写进<style></style>标签或内联style属性，哪怕只是近似值 - 对依赖字体的容器（如标题、按钮），用
min-height或aspect-ratio预留空间，避免文字撑开后下压其他元素 - 用
rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'"替代纯 JS 动态插入，更早触发下载与解析 - 若必须用 CSS-in-JS，启用 SSR 样式提取（如 Emotion 的
CacheProvider+renderStylesToString），确保首屏 HTML 包含关键样式
真正难处理的不是“样式没加载”，而是“样式加载后改变了已有布局尺寸却没预留余量”。CLS 问题往往藏在字体和行高这种看似无关紧要的细节里。
