异步加载非关键CSS，解决DOM阻塞问题

非关键CSS会必然阻塞DOM渲染，这不是缺陷而是浏览器规范行为，真正有效的解法不是取消加载，而是通过延迟下载或应用时机来避免其参与初始CSSOM构建；其中media="print"+onload是最轻量、零依赖、全浏览器兼容（含IE11）的硬核方案，利用浏览器对打印样式表的异步处理机制，在onload中立即切换media="all"并清空回调即可安全启用；而rel="preload"+as="style"更适合预加载关键但非首屏的CSS（如深色主题），需严格匹配href和补全noscript兜底；动态插入link时onload不可靠，推荐使用成熟库如loadCSS或兼容性写法；但所有这些优化的前提，是已将首屏关键CSS内联进HTML且控制在14KB以内——否则异步只是掩盖问题，而非解决问题。

非关键 CSS 一定会阻塞 DOM 渲染，这是浏览器规范行为，不是 bug。解决思路只有一个：不让它参与初始 CSSOM 构建。核心手段是「延迟下载时机」或「延迟应用时机」，而不是“取消加载”。

用 media="print" + onload 是最轻量且兼容性最好的方案

这是目前无需 JS、不依赖构建工具、连 IE11 都能跑通的硬核解法。原理是利用浏览器对 media="print" 的低优先级处理逻辑——它会异步下载，不阻塞 HTML 解析和渲染。

• media="print" 不是“假装打印”，而是真实触发浏览器降级为非阻塞加载路径
• onload 回调里必须立刻执行 this.media='all'，否则样式永远不会生效
• 必须加 this.onload=null，否则在某些旧版 Safari 中可能重复触发
• 写法必须严格：

用 rel="preload" + onload 切换 rel 更适合关键但非首屏的 CSS

当你要预加载某个 CSS（比如主题切换用的 dark.css），又不想让它干扰首屏 LCP，rel="preload" 是更主动的选择。但它不是“开箱即用”的异步方案，漏掉任一环节就白忙活。

• as="style" 必须写，否则 Chrome/Firefox 会忽略优先级提升，甚至不进预加载队列
• href 值要和后续插入的 完全一致（含 query 参数），否则缓存不复用
• 只对真正需要提前下载的资源用，比如用户点击“深色模式”前就该下好的文件
• 务必配 ，Safari 11.1 以下和禁 JS 场景靠它兜底

动态创建 标签时，onload 监听不可靠

很多人直接 document.head.appendChild(link) 就以为完事了，结果发现 link.onload 在 Firefox 和部分 Android WebView 中根本不会触发——这不是你代码写错，是浏览器实现差异。

• Firefox 从 69 开始才支持 link.onload，旧版本需 fallback 到 link.onreadystatechange
• 更稳妥的做法是用 loadCSS 库，它内部已封装兼容逻辑：loadCSS("theme.css")
• 如果坚持手写，建议用 requestIdleCallback 或 setTimeout(..., 0) 延后插入，避免在 DOMContentLoaded 前瞬间插入导致 FOUC
• 永远检查 document.currentScript 是否存在，老版 Android WebView 里它是 null

容易被忽略的细节：内联关键 CSS 比折腾异步更重要

所有异步方案都建立在一个前提上：你已经把首屏必需的 CSS 内联进 。如果还指望靠异步加载来补救首屏样式缺失，那只是把问题往后拖。

• 内联部分应控制在 14KB 以内（TCP 初始拥塞窗口限制）
• 不要内联 @import，它会触发额外 HTTP 请求并阻塞
• 异步加载的 CSS 里不要再包含 @font-face，字体加载会二次阻塞渲染
• 如果你用了 media="(prefers-reduced-motion: reduce)" 这类媒体查询，注意它影响的是“是否下载”，不是“是否应用”——匹配即发起请求

本篇关于《异步加载非关键CSS，解决DOM阻塞问题》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！