非关键CSS应延迟加载以避免阻塞渲染，推荐用JS动态创建link标签并设media="print"暂抑应用，加载完成后再切为media="all"；rel="preload"仅预加载不自动应用，async对link无效。
非关键 CSS 延迟加载，核心思路是：不阻塞页面渲染的前提下，等主体内容显示后再加载次要样式。最稳妥的做法是用 JavaScript 动态创建 <link> 标签并插入文档，同时设置 rel="stylesheet" 和 media="print"（或临时设为无效 media）来避免初始阻塞，加载完成后再切换为 media="all" 触发应用。
为什么不能直接用 rel="preload" 或 async？
CSS 文件天生具有渲染阻塞特性，<link rel="stylesheet"> 会同步下载并阻塞渲染；async 属性对 <link> 无效（仅适用于 <script>）；rel="preload" 只能预加载，不会自动应用样式，仍需手动挂载。
推荐的 JS 异步加载方式（无依赖、兼容性好）
以下代码可直接放入 <body> 底部或用 DOMContentLoaded 触发：
- 创建
<link>元素，设rel="stylesheet"，但先用media="print"抑制初始应用 - 设置
href指向目标 CSS 文件 - 监听
load事件，成功后立即将media改为"all"，样式即刻生效 - 为防加载失败，可加
onerror回退处理（如记录日志或降级）
示例代码：
立即学习“前端免费学习笔记（深入）”；
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/secondary.css';
link.media = 'print'; // 先不生效
link.onload = () => link.media = 'all';
link.onerror = () => console.warn('Secondary CSS failed to load');
document.head.appendChild(link);进阶优化：结合用户交互或滚动时机
如果该 CSS 仅用于某个折叠模块、弹窗或页面底部组件，可进一步延迟到真正需要时再加载：
- 监听按钮点击，点击后再执行上述加载逻辑
- 用
IntersectionObserver监听目标区域进入视口时触发加载 - 避免在
load事件前就操作依赖该样式的 DOM，防止 FOUC（闪动）
注意点与常见坑
延迟加载的 CSS 不应包含影响首屏布局的关键规则（如字体定义、重置样式、基础栅格），否则会导致布局偏移或文字闪烁；同时确保它不被其他 CSS 通过 @import 同步引入，否则会绕过异步控制。若使用构建工具（如 Webpack/Vite），也可通过 /* webpackMode: "lazy" */ 等注释配合动态 import() 实现更精细的代码分割。
