通过media属性异步加载非关键CSS，如设置media="print"并 onload 切换为all；2. 动态创建link标签实现JS控制的异步加载，结合requestIdleCallback优化时机；3. 内联首屏关键CSS并预加载其余样式，利用rel="preload"提示资源优先级；4. 在HTTP/2环境下启用服务器推送与强缓存策略，配合哈希命名实现长期缓存；5. 按设备或主题拆分CSS，按需加载以减少无效请求。核心在于区分关键与非关键资源，合理调度加载时机以提升首屏性能。
网页性能优化中，CSS的加载方式直接影响页面渲染速度。虽然CSS默认是阻塞渲染的资源，但我们可以通过一些技巧实现异步加载，提升首屏加载体验。以下是几种实用的async加载与性能优化方法。
使用media属性延迟非关键CSS加载
将非首屏必需的CSS（如打印样式或主题样式）设置为非阻塞加载：
- 通过设置
media="print"，让浏览器异步加载该CSS文件 - 加载完成后切换到
all，使其生效
示例代码：
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
这种方式简单有效，适合对兼容性要求不高的项目。
立即学习“前端免费学习笔记（深入）”；
动态插入link标签实现异步加载
利用JavaScript动态创建<link>标签，避免初始HTML解析时的阻塞：
- 在DOM加载完成后或空闲时加载非关键CSS
- 可结合
requestIdleCallback优化加载时机
实现代码：
function loadCSS(href) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
document.head.appendChild(link);
}
// 懒加载非关键样式
window.addEventListener('load', () => loadCSS('/styles/extra.css'));预加载关键CSS并内联
将首屏渲染必需的CSS直接内联到<head>中，避免网络请求延迟：
- 提取关键路径CSS（Critical CSS）
- 其余样式通过异步方式加载
- 配合
rel="preload"提示浏览器提前获取资源
例如：
<style>/* 内联关键CSS */</style> <link rel="preload" href="rest.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
利用HTTP/2服务器推送和缓存策略
在支持HTTP/2的环境下，可通过服务器推送提前发送CSS资源：
- 减少往返延迟
- 配合强缓存（Cache-Control）避免重复下载
- 使用内容哈希命名实现长期缓存
同时注意按设备或主题拆分CSS，按需加载，避免加载无用样式。
基本上就这些。合理使用异步加载技巧，既能保证视觉效果，又能显著提升页面响应速度。关键是区分“关键”与“非关键”资源，按需调度。不复杂但容易忽略细节。
