17370845950

使用 preload 配合动态 rel 切换可确保关键CSS优先且仅加载一次。1. 通过 提前下载关键CSS；2. 利用 onload 将 rel 设为 stylesheet 实现只加载一次；3. 非关键CSS设置 media="print" 再切换为 all 实现异步加载；4. 内联最小关键样式提升首屏性能。

页面中即使合并了CSS文件，仍可能因加载时机或重复引入导致关键样式多次加载。使用 preload 配合正确的加载策略，可以确保关键CSS优先且仅加载一次。

问题原因分析

尽管CSS已合并，但以下情况仍可能导致重复加载或阻塞：

• 多个 指向同一文件（如构建工具误配置）
• 动态脚本再次加载相同CSS
• 未正确使用媒体查询，导致浏览器预加载全部样式
• 关键CSS内联后，完整样式表仍未异步加载

使用 preload 预加载关键CSS

通过 rel="preload" 提示浏览器提前获取关键CSS，避免渲染阻塞：

注意：as="style" 让浏览器以正确优先级和类型处理资源。

配合 onload 实现只加载一次

preload 只是下载，不会自动应用。需结合 onload 将其插入文档：

这段代码确保：

• CSS 被优先下载
• 下载完成后才设置 rel="stylesheet"，触发应用
• this.onload=null 防止重复执行

非关键CSS异步加载

完整样式表应异步加载，避免阻塞渲染：

利用 media="print" 初始不应用，加载后切换为 all，实现异步加载。

内联最小关键CSS（可选优化）

将首屏必需的样式直接内联到 中：

这样在CSS文件到达前已有基础样式，提升感知性能。

基本上就这些方法。合理使用 preload + 动态 rel 切换，再配合内联关键样式，就能确保关键CSS优先、唯一加载，同时不阻塞页面渲染。