link rel=”stylesheet” 默认阻塞渲染是为了避免 fouc，确保样式确定后再渲染；可通过 media 属性（如 media=”print”）延迟非关键 css 加载，domcontentloaded 时激活，不阻塞解析。
为什么 link rel="stylesheet" 默认会阻塞渲染
浏览器遇到 <link rel="stylesheet"> 时，会暂停 HTML 解析、推迟 DOM 构建，直到 CSSOM 就绪——这是为了确保「样式确定后再渲染」，避免 FOUC（闪白或样式跳变）。但这也意味着哪怕一个 200KB 的 theme.css 卡在 CDN 慢加载，首屏内容就一直空白。
所以「延迟加载 CSS」本质不是「不加载」，而是「不阻塞关键渲染路径」。重点在于区分：哪些 CSS 必须同步（如布局、文字颜色），哪些可以晚点（如动画、暗色模式、打印样式）。
用 media 属性实现条件性加载
最轻量、零 js、原生支持的方案：把非关键 CSS 的 media 设为暂时不匹配的值，比如 print 或自定义查询，等页面就绪再切回 all。
-
<link rel="stylesheet" href="lazy.css" media="print" onload="this.media='all'">—— 加载完立刻激活，不阻塞解析 - 注意：IE 不支持
onload，需 fallback 到onreadystatechange或用document.createDocumentFragment()动态插入 -
media="(min-width: 1024px)"这类响应式媒体查询也有效，但要确认你真不需要小屏设备的该样式
动态插入 link 的时机很关键
很多人以为「放在