通过JavaScript动态插入link标签、预加载CSS并延迟应用、使用media属性延迟非关键CSS加载，结合load事件优化体验，实现CSS异步加载，避免阻塞渲染，提升性能。
在 CSS 中实现异步加载样式，主要是为了解决传统 link 标签阻塞页面渲染的问题，从而提升页面加载性能。虽然原生 CSS 加载是阻塞的，但可以通过一些技巧实现“异步”加载效果。
通过 JavaScript 创建 <link> 标签并插入到页面中，可以让浏览器在 DOM 构建完成后才开始加载 CSS，避免阻塞关键渲染路径。
rel="stylesheet" 和 href 属性<head> 或 <body> 中触发下载示例代码：
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';
document.head.appendChild(link);
利用 rel="preload" 提前加载资源，等需要时再切换为样式表，实现预加载 + 异步应用。
立即学习“前端免费学习笔记（深入）”；
<link rel="preload"> 告诉浏览器提前获取 CSS 文件link[rel=stylesheet] 来激活示例代码：
<link rel="preload" href="async-style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
或手动控制：
const preloadLink = document.createElement('link');
preloadLink.rel = 'preload';
preloadLink.as = 'style';
preloadLink.href = 'async-style.css';
preloadLink.onload = () => {
const styleLink = document.createElement('link');
styleLink.rel = 'stylesheet';
styleLink.href = 'async-style.css';
document.head.appendChild(styleLink);
};
document.head.appendChild(preloadLink);
将非关键 CSS 的 media 设置为一个默认不匹配的条件，使其异步加载。
例如：
<link rel="stylesheet" href="print.css" media="print"> <link rel="stylesheet" href="non-critical.css" media="not all" onload="this.media='all'">
页面加载后通过 JS 将 media 改为 all，触发样式应用。这样初始渲染不受影响。
为了避免样式突然变化（FOUC），可以在 CSS 加载完成后再显示相关内容。
loading-styles 类示例：
link.onload = () => {
document.body.classList.remove('loading-styles');
};
基本上就这些方法。核心思路是：不让 CSS 阻塞 HTML 解析，通过 JS 控制加载时机和应用时机，尤其适用于非首屏、主题、第三方组件等非关键样式。注意权衡异步带来的 FOUC 风险，合理使用 media、preload 和动态注入策略。不复杂但容易忽略细节。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
502
收藏
