应内联关键CSS并异步加载非关键CSS：用critical或critters提取首屏必需样式（≤14KB），通过rel="preload" onload注入非关键CSS，禁用预处理器抽象和低效选择器，避免弱网检测延迟。
弱网下CSS加载阻塞渲染怎么办
直接结论：不能靠「动态引入」解决，得用「内联关键CSS + 异步加载非关键CSS」组合。浏览器遇到 <link rel="stylesheet"> 就会阻塞渲染，不管带宽多低，这是规范行为，没法绕过。
怎么提取并内联「关键CSS」
关键CSS是首屏渲染必需的样式（比如标题字号、按钮颜色、布局容器），不是整张CSS文件。手动提取容易漏，推荐工具链介入：
-
critical（Node.js 工具）可基于真实HTML和视口尺寸自动提取，输出内联用的CSS字符串 - Webpack 用户可用
critters插件，在构建时自动生成<style></style>块并注入HTML头部 - 别用「压缩整个CSS再内联」——体积大了反而拖慢首屏，内联内容建议控制在 14KB 以内（避免TCP慢启动多往返）
非关键CSS如何异步加载不阻塞
目标是让非首屏样式（如模态框、分页组件、主题色切换）延迟加载，且不触发FOUC或布局抖动：
- 用
rel="preload"+onload注入：<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
- 不要用
rel="prefetch"—— 它是低优先级，可能被浏览器丢弃；也不要用fetch()+insertRule—— 大量规则性能差，且无法处理@import和字体声明 - 注意兼容性：
onload在 Safari 15.4+ 才稳定支持，老版本需降级为setTimeout轮询document.styleSheets.length
极简版CSS怎么写才真有效
「极简」不是删注释或缩空格，而是砍掉所有运行时无关的抽象层：
立即学习“前端免费学习笔记（深入）”；
- 禁用 CSS 预处理器的嵌套、循环、变量计算——这些在构建时展开后体积反而更大
- 避免通配符选择器（
*）、属性选择器（[type="text"]）和深层后代选择器（.a .b .c），它们增加CSSOM构建时间 - 字体图标、SVG背景图一律转为内联
<svg></svg>或 base64 data URL，减少HTTP请求数——弱网下每个请求的RTT代价远高于CSS体积增长
真正卡顿的从来不是CSS文件大小，而是「浏览器必须等它解析完才能画第一帧」。把关键部分塞进HTML，其余扔给 preload 按需拉，比任何「智能加载器」都可靠。弱网检测本身就有延迟，别试图在JS里判断网络再决定是否加载CSS——用户已经看到白屏了，这时候再加载，意义不大。
