关键CSS内联以避免布局跳动，非关键CSS通过preload预加载并异步挂载，结合媒体查询和占位优化，确保首屏快速稳定渲染。
页面首次加载时，如果关键布局的CSS通过异步方式加载，会导致浏览器先渲染无样式或部分样式的内容，等CSS下载完成后再重新渲染，造成明显的布局跳动（Layout Shift）。使用 preload 提前加载关键CSS是有效缓解这一问题的方式。
识别并提取关键布局CSS
并非所有CSS都需要立即加载。应将决定首屏结构的关键样式（如页头、导航、主容器的宽高和定位）提取出来，形成“关键CSS”（Critical CSS）。
- 分析首屏元素依赖的样式规则
- 使用工具如 critical、Penthouse 或构建插件自动提取
- 将提取出的CSS内联到HTML的
中，确保快速生效
用 preload 预加载异步CSS文件
对于非关键但必要的CSS文件（如完整主题样式、组件样式），仍可异步加载，但需通过 rel="preload" 提示浏览器尽早开始下载，避免阻塞渲染的同时提升加载优先级。
<link rel="preload" href="styles/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
这样浏览器会在解析HTML阶段就发起CSS请求，但不会立即应用，直到通过JS设置 rel="stylesheet" 才激活。
立即学习“前端免费学习笔记（深入）”；
结合媒体查询优化加载时机
对特定设备或场景的CSS，可通过媒体属性延迟加载，减少主线程压力。
<link rel="preload" href="print.css" as="style" onload="if(media==='print')this.rel='stylesheet'">
或者只在匹配时才加载：
<link rel="preload" href="mobile.css" as="style" media="(max-width: 768px)" onload="this.rel='stylesheet'">
补充：防跳动的其他实践
- 为关键元素设置固定尺寸（如图片容器的宽高），防止加载后撑开布局
- 使用骨架屏占位，提升视觉连续性
- 避免在CSS加载前显示大量未样式化内容（FOUC）
基本上就这些。核心思路是：关键CSS内联 + 非关键CSS预加载 + 异步挂载，既能保证首屏快速渲染，又能避免样式延迟导致的布局跳动。
