答案：通过JavaScript控制外部样式表的加载时机可实现CSS延迟加载。具体方法包括：1. 动态创建link标签在DOMContentLoaded或load事件后插入；2. 利用media属性设置为非匹配条件，再由JS更改激活；3. 结合preload预获取资源并由JS延迟注入；适用于主题、动画、非关键响应式等样式，确保首屏关键CSS正常加载以提升性能。
CSS 本身没有直接实现“延迟加载”外部样式的能力，但可以通过 JavaScript 配合来控制 外部样式表的异步加载和延迟应用。这样可以提升页面初始加载速度，避免阻塞渲染。
1. 使用 JavaScript 动态加载 CSS 文件
将 link 标签的插入时机推迟到页面主体内容渲染之后，比如在 window.onload 或 DOMContentLoaded 事件中执行。示例代码：
这种方式不会阻塞页面渲染，实现了“延迟加载”效果。
2. 利用媒体查询（media 属性）延迟非关键样式
通过设置 media 属性为非默认匹配条件，可以让浏览器延迟加载某些不立即需要的样式表。例如，只为打印准备的样式不会立即加载：
立即学习“前端免费学习笔记（深入）”；
也可以结合 JS 在合适时机更改 media 值来激活加载：
3. preload + JavaScript 控制加载时机
使用 preload 提示浏览器提前获取资源，但由 JS 决定何时真正应用。先预加载资源：
再通过 JS 插入 link 标签启用：
window.addEventListener('load', function () {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'delayed-style.css';
document.head.appendChild(link);
});
这样既利用了浏览器预加载机制，又实现了延迟应用。
4. 实际应用场景建议
适合延迟加载的样式包括：主题皮肤、动画库、响应式断点以下的样式、第三方组件样式等。- 关键样式仍应放在 head 中正常加载，确保首屏渲染正常
- 非关键样式可延迟，避免影响 LCP 等性能指标
- 注意加载顺序，防止样式覆盖混乱
