link rel="preload"可提前下载CSS而不阻塞渲染，但需加as="style"并用onload切换rel="stylesheet"才能生效；非关键CSS应改用prefetch或动态加载。
link rel=preload 能提前加载CSS但不阻塞渲染
浏览器默认用 加载 CSS 时，会阻塞 HTML 解析和首屏渲染，哪怕 CSS 文件还没用到。用 preload 可以把下载提前，同时不触发解析和应用，等真正需要时再手动注入。
- 只对关键 CSS（如首屏样式）用，非关键 CSS 改用
rel="prefetch"或动态加载 - 必须加
as="style"，否则浏览器不会复用预加载的资源 - 需配合
onload回调切换为rel="stylesheet"，否则样式永远不会生效 - 示例：
<link rel="preload" href="critical.css" as="style" onload="this.rel='stylesheet'">
动态创建 link 标签 + media="print" 实现无阻塞加载
利用浏览器对 media="print" 样式表不立即应用的特性，先加载、后切换，避免初始渲染阻塞。
- 创建
时设media="print"，此时下载但不解析 - 监听
load事件，成功后立即将media改为"all"或空字符串 - 注意：IE 不支持
onload，需用onreadystatechange兜底 - 不要用
setTimeout模拟“延迟加载”，那只是掩盖问题，没解决阻塞本质
@import 在 CSS 文件里等于自废武功
@import 在 CSS 中会触发串行请求，且无法被 preload 或异步控制，比 HTML 中的 更慢。
- 所有
@import都应迁移到 HTML 的中，按优先级排序 - 构建工具（如 Webpack/Vite）中若用了
css-loader的importLoaders，要确认是否隐式引入了@import链 - DevTools 的 Network 面板里看到 CSS 请求呈明显瀑布流，大概率是
@import搞的鬼
HTTP/2 Push 已基本不可用，别再依赖它
曾经想靠服务器主动 push CSS 来提速，但现在主流 CDN 和浏览器（Chrome 96+、Firefox 90+）已默认禁用 HTTP/2 Push，且存在缓存复用率低、难以精准控制等问题。
- 即使 Nginx 或 Apache 配了
http2_push，实际推送大概率被浏览器忽略 - 相比 Push，
preload由前端声明，更可控、兼容性更好（IE11 不支持，但可降级） - 检查响应头有没有
Link: <...>; rel=preload，比查 Push 日志更直接有效
关键不是“让 CSS 加载更快”，而是“不让它干扰首屏渲染”。很多团队加了 preload 却忘了 onload 切换，或者把整站 CSS 打包成一个大文件还硬推，结果 preload 变成了 pre-bloat。真要见效，得从资源拆分 + 加载时机 + 浏览器行为三者一起卡准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
