如何在现代浏览器中利用CSS样式的非阻塞加载技术？-css教程-PHP中文网

唯一真正非阻塞的css加载方式是rel="preload" as="style"配合onload动态注入；因其提前请求且不解析、不阻塞渲染，仅在onload后切换为stylesheet才生效，兼顾性能与兼容性。

如何在现代浏览器中利用css样式的非阻塞加载技术？

现代浏览器中真正能实现「非阻塞」CSS加载的，只有 rel="preload" 配合 onload 动态注入这一条路径。其他方案要么仍会触发部分阻塞（如 media="print"），要么兼容性或可靠性不足（如 IE 的 onreadystatechange）。

为什么 `rel="preload" as="style"` 是唯一靠谱的选择

浏览器对 rel="preload" 的处理是：提前发起请求、不解析、不阻塞 HTML 解析和渲染。加上 as="style" 后，它才会被按样式表优先级调度；若只写 rel="preload" 不加 as，会被当作普通资源，失去预加载意义。

关键点在于：preload 本身不会应用样式——必须靠 onload 回调手动切换为 rel="stylesheet" 才生效。

必须监听 onload，不是 onreadystatechange（已淘汰且不可靠）
插入前建议检查是否已存在同 href 的 <link>，避免重复加载
不支持 preload 的旧浏览器（如 IE）需降级回同步 <link rel="stylesheet"> 或用 fetch + createStyleSheet

`media="print"` 方案的实际表现与风险

这种写法：<link rel="stylesheet" href="lazy.css" media="print" onload="this.media='all'"> 确实能绕过初始阻塞，但问题不少：

加载完成前页面可能短暂无样式（FOUC），尤其在弱网或高延迟下明显
IE 完全不支持 onload，必须额外写 fallback 逻辑
如果用户正在打印预览，media="print" 会意外激活，导致样式提前应用
无法控制加载时机——它一进 HTML 就开始下载，哪怕 DOM 还没 ready

如何安全注入非关键 CSS（含 JS 示例）

推荐封装一个最小可用函数，兼顾存在性检查和降级：

小红书长文-谷歌浏览器

在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。

下载

function loadNonCriticalCSS(href) {
  if (document.querySelector(`link[href="${href}"]`)) return;
  const link = document.createElement("link");
  link.rel = "preload";
  link.as = "style";
  link.href = href;
  link.onload = () => {
    link.rel = "stylesheet";
    link.onload = null;
  };
  document.head.appendChild(link);
}

调用时直接传路径即可：loadNonCriticalCSS("/css/animations.css")。

注意：href 必须是完整路径或相对路径，不能带查询参数差异（否则去重失效）；若样式表含内联 @import，仍会触发额外阻塞，应尽量避免。