合理控制CSS加载时机可提升性能，具体包括：内联关键CSS、异步加载非关键CSS、使用media属性延迟加载、结合preload预加载资源，优化首屏渲染速度。
在网页性能优化中，CSS的引入方式与延迟加载（lazy load）策略结合使用，能有效减少首屏加载时间，提升用户体验。关键在于合理控制CSS资源的加载时机和优先级，避免阻塞渲染。
常见的CSS引入方式
CSS可以通过以下几种方式引入到页面中，每种方式对页面加载的影响不同：
- 内联样式（inline style）：直接写在HTML标签的style属性中，适用于个别元素的特殊样式，但不利于维护。
- 内部样式表（internal CSS）：通过<style>标签写在HTML头部，适合单页专用样式，仍会阻塞渲染。
- 外部样式表（external CSS）：通过<link rel="stylesheet" href="...">引入，最常用，但默认会阻塞页面渲染直到文件下载并解析完成。
- @import导入：在CSS文件中使用@import引入其他CSS文件，会增加请求链，不推荐用于关键路径。
延迟加载非关键CSS（Lazy Load CSS）
并非所有CSS都需要在页面加载初期就生效。例如，滚动后才出现的模块、响应式断点下的样式、或隐藏组件的样式，都可以延迟加载。
实现思路是：只加载首屏必要的“关键CSS”（Critical CSS），其余CSS通过JavaScript异步加载。
立即学习“前端免费学习笔记（深入）”；
- 将非关键CSS从主样式表中分离，单独打包成chunk.css等文件。
- 初始HTML中不使用rel="stylesheet"引入这些文件，避免阻塞。
- 通过JavaScript在适当时机（如DOMContentLoaded后）动态插入link标签：
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'non-critical.css';
document.head.appendChild(link);
这样可以实现按需加载，降低首屏渲染延迟。
配合媒体查询与rel属性优化
利用media属性，可以让某些CSS文件在满足条件时才加载，也是一种轻量级延迟加载。
- 打印样式表可设置media="print"，用户打印时才加载： <link rel="stylesheet" href="print.css" media="print">
- 响应式设计中，可为大屏设备延迟加载高分辨率样式： <link rel="stylesheet" href="desktop.css" media="(min-width: 1024px)">
浏览器不会立即下载media不匹配的资源，从而实现自然延迟。
预加载提示与load事件监听
为了进一步优化体验，可以使用rel="preload"提前告知浏览器需要加载某个CSS文件，但不立即应用。
<link rel="preload" href="theme.css" as="style" onload="this.onload=null;this.rel='stylesheet'">这种方式先预加载资源，等到合适时机再切换为stylesheet，既不阻塞渲染，又能加快后续应用速度。
也可监听load事件，在CSS加载完成后触发相关UI更新或动画。
基本上就这些。合理组合关键CSS内联、外部异步加载、media条件加载和preload提示，就能在保持样式完整的同时显著提升页面响应速度。
