使用 preload 配合动态 rel 切换可确保关键css优先且仅加载一次。1. 通过 提前下载关键css；2. 利用 onload 将 rel 设为 stylesheet 实现只加载一次；3. 非关键css设置 media="print" 再切换为 all 实现异步加载；4. 内联最小关键样式提升首屏性能。
页面中即使合并了CSS文件，仍可能因加载时机或重复引入导致关键样式多次加载。使用 preload 配合正确的加载策略，可以确保关键CSS优先且仅加载一次。
问题原因分析
尽管CSS已合并，但以下情况仍可能导致重复加载或阻塞：
- 多个
<link rel="stylesheet">指向同一文件（如构建工具误配置） - 动态脚本再次加载相同CSS
- 未正确使用媒体查询，导致浏览器预加载全部样式
- 关键CSS内联后，完整样式表仍未异步加载
使用 preload 预加载关键CSS
通过 rel="preload" 提示浏览器提前获取关键CSS，避免渲染阻塞：
注意：as="style" 让浏览器以正确优先级和类型处理资源。
立即学习“前端免费学习笔记（深入）”；
配合 onload 实现只加载一次
preload 只是下载，不会自动应用。需结合 onload 将其插入文档：
这段代码确保：
- CSS 被优先下载
- 下载完成后才设置
rel="stylesheet"，触发应用 -
this.onload=null防止重复执行
非关键CSS异步加载
完整样式表应异步加载，避免阻塞渲染：
ain.css" as="style" onload="this.rel='stylesheet'" media="print" onload="this.media='all'">利用 media="print" 初始不应用，加载后切换为 all，实现异步加载。
内联最小关键CSS（可选优化）
将首屏必需的样式直接内联到 中：
这样在CSS文件到达前已有基础样式，提升感知性能。
基本上就这些方法。合理使用 preload + 动态 rel 切换，再配合内联关键样式，就能确保关键CSS优先、唯一加载，同时不阻塞页面渲染。
