通过异步加载CSS可提升页面加载速度与用户体验。1. CSS默认为渲染阻塞资源，浏览器需等待关键CSS就绪才构建渲染树；2. 非关键CSS（如打印样式）可通过media属性实现异步加载，如media="print"或media="not all"避免阻塞；3. 动态插入link标签可延迟加载非核心样式，示例代码中window.onload后加载theme.css；4. 最佳实践为内联首屏关键CSS至style标签，其余通过JavaScript或rel="preload"异步加载，配合onload事件切换为样式表；5. 合理拆分关键与非关键CSS，结合内联、media控制与动态加载，显著减少阻塞时间，加快内容呈现。
页面加载速度直接影响用户体验和搜索引擎排名，而CSS作为渲染阻塞资源，如果处理不当会拖慢页面显示。通过异步加载CSS，可以让页面内容更快呈现，提升整体性能。
理解CSS的渲染阻塞特性
浏览器在构建渲染树前需要获取所有CSS资源，因此默认情况下，CSS是渲染阻塞的。这意味着即使HTML已经下载完成，只要关键CSS未就绪，页面就不会渲染。对于非关键CSS（如打印样式、主题皮肤等），完全可以延迟加载，避免影响首屏速度。
使用media属性实现条件异步加载
利用标签的media属性，可以将非关键CSS的加载从主渲染流程中移出。
例如，打印样式表不会影响屏幕渲染：
立即学习“前端免费学习笔记（深入）”；
<link rel="stylesheet" href="print.css" media="print">这类资源会被浏览器异步加载，不阻塞页面渲染。你也可以用一个无效的media（如media="not all"）先加载但不应用，后续再激活。
动态插入link标签实现异步加载
将非核心CSS通过JavaScript动态插入，可实现真正的异步加载。
示例代码：
<script> function loadCSS(href) { var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; document.head.appendChild(link); } // 页面加载完成后加载非关键CSS window.addEventListener('load', function() { loadCSS('theme.css'); }); </script>这样，首屏关键内容不受影响，其他样式在空闲时加载。
预加载关键CSS并异步加载其余部分
最佳实践是内联关键CSS，其余外部文件异步加载。
- 提取首屏所需的关键CSS（above-the-fold CSS）
- 将其直接写入HTML的<style>标签中
- 其余CSS通过JavaScript或rel="preload"异步加载
例如使用preload预加载：
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">配合onload事件自动切换为样式表，实现高效异步。
基本上就这些方法。合理拆分关键与非关键CSS，结合内联、media控制和动态加载，能显著减少渲染阻塞时间，让页面更快展现内容。
