首屏关键CSS必须内联到中（≤14KB），非关键CSS用rel="preload" as="style"配合onload插入link[rel=stylesheet]并临时设media="print"，禁用@import、避免JS动态插入、设min-height/aspect-ratio防抖动，用@layer统一控制层叠顺序，服务端内联需HTML转义及URL编码。
link标签的rel属性选preload还是stylesheet
用 rel="preload" 提前拉取CSS文件，不执行解析；用 rel="stylesheet" 才真正应用样式。跳动往往发生在后者触发时——浏览器先渲染无样式的HTML，等CSS下载解析完再重绘。所以不能只靠preload“快”，关键得控制何时应用。
常见错误：把所有CSS都写成 rel="preload" + onload 动态插入 link[rel=stylesheet]，结果JS执行延迟或失败，页面长期白屏或错位。
- 首屏关键CSS必须内联到
中（不超过14KB），避免任何网络请求阻塞渲染 - 非关键CSS用
rel="preload"+as="style"，并在onload回调里插入link[rel=stylesheet]，不要依赖DOMContentLoaded - 务必加
media="print"临时属性，防止预加载时就参与样式计算，再在onload里改回media="all"
CSS加载过程中如何防止FOUC和布局抖动
FOUC（Flash of Unstyled Content）本质是样式应用时机不可控。现代浏览器对 link[rel=stylesheet] 有渲染阻塞行为，但一旦涉及JS动态插入、@import 或媒体查询切换，阻塞就会失效。
典型场景：SPA中路由切换后异步加载组件CSS，旧样式已卸载、新样式未就绪，DOM结构还在，但height/width/margin全乱套。
立即学习“前端免费学习笔记（深入）”；
- 禁用
@import—— 它会串行加载，且无法被preload识别，容易造成级联延迟 - 避免用JS动态创建
link标签并append到head，优先用rel="preload"预取 +onload插入，确保插入时机可预测 - 对高度依赖样式的容器（如卡片、列表项），设最小尺寸：
min-height或aspect-ratio，减少重排幅度
使用CSS @layer控制层叠顺序与加载优先级
@layer 不解决加载速度，但能避免因引入顺序错乱导致的样式覆盖和意外重绘。比如第三方UI库的CSS晚于业务CSS加载，按钮颜色可能闪一下才变回主题色——这不是加载慢，是层叠逻辑失控。
错误做法：靠HTML中 link 标签排列顺序硬控优先级，一旦打包工具做code splitting或HTTP/2 push打乱顺序就失效。
- 全局统一定义层级：
@layer base, components, utilities, overrides; - 所有CSS都归属某一层，例如第三方库加
@layer components { ... }，业务按钮样式写进@layer overrides { ... } - 搭配
rel="preload"使用时，各layer的CSS可独立预取，不会因一个文件延迟而卡住整个层叠链
服务端注入关键CSS时的字符编码与转义陷阱
服务端模板（如EJS、Nunjucks）直接内联CSS时，如果没处理好换行、引号或Unicode字符，会导致HTML解析中断，样式块被截断——看起来像“部分生效”，实则是语法错误让后续CSS规则全部失效。
常见错误现象：<style>body{color:red} .title{font-size:1.2em</style> 少了右大括号，浏览器直接忽略整个style块。
- 服务端输出CSS前必须HTML转义：单双引号、
、<code>>、&全部转为实体 - 禁止在内联CSS中写注释（
/* */），某些模板引擎会提前截断 - 若CSS含变量（如主题色），确保服务端拼接时用
JSON.stringify()处理字符串值，避免引号嵌套崩坏
最易被忽略的是：字体URL里的空格和括号。比如 url("fonts/Inter (Variable).woff2") 在HTML内联时必须写成 url("fonts/Inter%20(Variable).woff2")，否则解析器会在第一个空格处断开。
