17370845950

答案：通过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 等性能指标
• 注意加载顺序，防止样式覆盖混乱

基本上就这些方法，核心思路是用 JavaScript 控制 link 标签的插入或激活时机，从而实现对 CSS 外部文件的延迟加载。