同步加载阻塞渲染，确保样式完整但易白屏；2. 异步加载提升首屏速度，可能引发FOUC；3. 内联关键CSS缩短渲染路径；4. 预加载与媒体查询优化资源加载时机。合理组合可平衡速度与体验。
页面加载性能很大程度上受CSS资源引入方式的影响。不同的引入方法会改变渲染阻塞、资源下载顺序和关键渲染路径，进而影响首屏展示速度。理解同步与异步加载机制，有助于优化用户体验。
1. 同步加载：默认阻塞渲染
通过 <link> 标签直接引入CSS是默认的同步方式：
<link rel="stylesheet" href="style.css">浏览器遇到该标签时会：
- 暂停HTML解析，发起CSS文件请求
- 等待样式表下载并解析完成
- 继续构建CSSOM，之后才可进行布局与绘制
这意味着：即使CSS体积大或网络慢，页面也无法渲染内容，造成白屏。但这种方式保证了样式完整性，避免FOUC（无样式内容闪现）。
立即学习“前端免费学习笔记（深入）”；
2. 异步加载：减少渲染阻塞
为避免CSS阻塞，可通过以下方式实现异步加载：
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">或使用JavaScript动态插入：
const link = document.createElement('link');link.rel = 'stylesheet';
link.href = 'style.css';
document.head.appendChild(link);
这类方式的特点是：
- CSS下载不阻塞HTML解析
- 文件下载完成后才应用样式
- 可能引发FOUC，尤其在慢网速下内容先显示后重排
适合非关键CSS（如主题、动画），提升首屏速度。
3. 关键CSS内联：优化首屏渲染
将首屏必需的CSS直接嵌入HTML头部：
<style>...header, hero styles...</style>好处包括：
- 无需额外请求，立即可用
- 缩短关键渲染路径
- 显著减少首次渲染时间
建议配合异步加载剩余CSS，实现“先见即所想”的体验。
4. 预加载与媒体查询优化
利用 rel="preload" 提前拉取重要资源：
<link rel="preload" href="print.css" as="style" media="print">或通过媒体查询条件加载：
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">浏览器仅在匹配条件下才下载，避免无效请求。预加载还能提升高优先级CSS的获取时机，而不阻塞渲染。
基本上就这些。合理组合内联关键CSS、异步加载非关键样式、使用preload提示资源优先级，能有效平衡渲染速度与视觉稳定性。关键是根据页面结构区分“必须马上有”和“可以稍后”的样式。
