使用preload和JavaScript控制CSS异步加载，通过rel="preload"提前下载并动态切换rel属性实现非阻塞加载（1）；结合media属性延迟非关键CSS（2）；预加载字体、内联关键CSS、设置font-display:swap减少FOUT（3）；兼容性处理确保旧浏览器正常加载（4）。
在现代网页开发中，CSS 资源的加载方式直接影响页面渲染速度和用户体验。虽然 标签默认是同步阻塞式加载样式表，但我们可以通过一些技巧实现“异步”加载 CSS，从而提升首屏性能并合理处理 FOUT（Flash of Unstyled Text）等问题。
使用 preload 实现异步加载 CSS
通过 rel="preload"，我们可以告诉浏览器提前下载 CSS 文件，但不立即应用，从而实现异步加载控制：
说明：
- rel="preload"：提示浏览器立即开始下载该资源，优先级高。
- as="style"：明确资源类型为样式表，避免 MIME 类型警告。
- onload 切换 rel：资源下载完成后，动态将其变为 rel="stylesheet"，触发样式应用。
这样既实现了非阻塞下载，又控制了样式的实际注入时机。
立即学习“前端免费学习笔记（深入）”；
结合 media 属性延迟非关键 CSS
对于打印样式或特定设备样式，可以设置一个无效的 media 查询来延迟加载：
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
浏览器会异步加载这些资源，仅在匹配条件时才应用。这种机制天然支持异步行为，适合非关键路径 CSS。
避免 FOUT：字体与样式加载策略
FOUT 常出现在 Web 字体或关键 CSS 延迟加载时。用户先看到无样式文本，随后突然跳变。解决方法包括：
-
预加载关键字体：
- 使用 font-display: swap：在 @font-face 中设置，允许快速展示备用字体，减少空白时间。
- 内联关键 CSS：将首屏必需的样式直接写入 ，避免网络请求延迟。
- JavaScript 控制样式注入时机：确保字体和样式都就绪后再激活主题。
完整异步加载示例（含兼容性处理）
以下是一个生产环境可用的异步加载方案：
<script><br> var link = document.getElementById('async-style');<br> link.onload = function() {<br> this.rel = 'stylesheet';<br> };<br> // 兼容不支持 onload 的旧浏览器<br> if ('onload' in link) {} else {<br> setTimeout(function() { link.rel = 'stylesheet'; }, 500);<br> }<br> </script>
这种方式兼顾现代浏览器性能优化与旧版兼容性。
基本上就这些。合理使用 preload、media 和 JavaScript 控制，能有效实现 CSS 异步加载，在提升性能的同时减少视觉闪烁问题。关键是区分关键与非关键资源，按需加载。
