最轻量、零JS依赖、兼容性最好的延迟引入方式是用media属性配合onload激活，但必须确保media值初始不匹配，否则仍会阻塞；media="print"等不匹配表达式使浏览器标记CSS为非关键，跳过阻塞下载。

直接结论：用 media 属性配合 onload 激活，是最轻量、零 JS 依赖、兼容性最好的延迟引入方式；但必须确保 media 值在初始渲染时**不匹配**，否则照样阻塞。

为什么 media="print" 能绕过阻塞

浏览器对 <link rel="stylesheet"> 的阻塞行为，只发生在媒体查询**当前匹配**时。把 media 设为 "print"、"screen and (min-width: 9999px)" 或 "(prefers-reduced-motion: reduce)"（而用户未开启该偏好），浏览器会立刻标记该 CSS 为“非关键”，跳过下载或推迟到空闲时加载，HTML 解析和 DOM 构建完全不受影响。

• 不要用 media="all" 或 media="screen"——它们默认匹配，等于没做任何延迟
• media="(min-width: 1024px)" 只在桌面设备生效，但若你首屏在手机上也需要这部分样式，就会漏掉，导致布局错乱
• IE 不支持 onload，需 fallback 到 onreadystatechange 或改用动态插入

rel="preload" + onload 注入的实操要点

当非关键 CSS 必须在用户交互前就绪（比如弹窗、下拉菜单），仅靠 media 延迟可能加载太晚，这时要用 rel="preload" 主动拉取，再手动注入为样式表。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 必须写 as="style"，否则浏览器不会按高优先级处理，甚至可能降级为 fetch 级别
• 注入逻辑要放在 DOMContentLoaded 后立即执行，不能等 window.onload，否则用户已开始操作
• Safari 对 <link> 的 onload 支持不稳定，建议加兜底：

  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'non-critical.css';
  document.head.appendChild(link);
  

哪些 CSS 真的“可延迟”？别凭感觉判断

延迟不是技术问题，而是语义和用户路径问题。一个按钮的 :hover 样式可以等到用户第一次悬停前再加载；但首屏导航栏如果缺了 display: flex，整个结构就塌了——哪怕它只占 2KB。

• 用 Chrome DevTools 的 Coverage 面板看真实 CSS 使用率，红色部分就是可删或可延迟的
• 用 Lighthouse 的 Eliminate render-blocking resources 报告反向验证：哪些 CSS 被标记为阻塞，但实际首屏根本没用到
• 禁用 @import —— 它在 CSS 文件内触发串行请求，比外链更慢，且无法被 media 或 preload 控制

真正容易被忽略的点是：延迟加载后不验证是否生效。样式补丁式闪烁、伪类失效、媒体查询错位，往往不是加载失败，而是激活时机或匹配条件没对齐。上线前务必在弱网模拟下滚动+悬停+切换主题，看样式是否“刚好来得及”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！