答案：通过javaScript控制外部样式表的加载时机可实现css延迟加载。具体方法包括：1. 动态创建link标签在DOMContentLoaded或load事件后插入；2. 利用media属性设置为非匹配条件，再由js更改激活；3. 结合preload预获取资源并由JS延迟注入；适用于主题、动画、非关键响应式等样式，确保首屏关键CSS正常加载以提升性能。
CSS 本身没有直接实现“延迟加载”外部样式的能力，但可以通过 javascript 配合来控制 外部样式表的异步加载和延迟应用。这样可以提升页面初始加载速度，避免阻塞渲染。
1. 使用 JavaScript 动态加载 CSS 文件
将 link 标签的插入时机推迟到页面主体内容渲染之后，比如在 window.onload 或 DOMContentLoaded 事件中执行。
示例代码：
<script> function loadCSS(href) { var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = href; document.head.appendChild(link); } // 页面加载完成后加载样式 window.addEventListener('load', function() { loadCSS('/path/to/your/style.css'); }); </script>这种方式不会阻塞页面渲染，实现了“延迟加载”效果。
2. 利用媒体查询（media 属性）延迟非关键样式
通过设置 media 属性为非默认匹配条件，可以让浏览器延迟加载某些不立即需要的样式表。
例如，只为打印准备的样式不会立即加载：
立即学习“前端免费学习笔记（深入）”；
<link rel="stylesheet" href="print.css" media="print">也可以结合 JS 在合适时机更改 media 值来激活加载：
<link id="lazy-style" rel="stylesheet" href="extra.css" media="disabled"> <script> window.addEventListener('load', function () { document.getElementById('lazy-style').media = 'all'; }); </script>3. preload + JavaScript 控制加载时机
使用 preload 提示浏览器提前获取资源，但由 JS 决定何时真正应用。
先预加载资源：
<link rel="preload" href="delayed-style.css" as="style">再通过 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 等性能指标
- 注意加载顺序，防止样式覆盖混乱
基本上就这些方法，核心思路是用 JavaScript 控制 link 标签的插入或激活时机，从而实现对 CSS 外部文件的延迟加载。