CSS延迟加载技巧：异步引入非关键样式

有志者，事竟成！如果你在学习文章，那么本文《CSS延迟加载非关键样式，可通过JS异步引入实现。》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

非关键CSS应延迟加载以避免阻塞渲染，推荐用JS动态创建link标签并设media="print"暂抑应用，加载完成后再切为media="all"；rel="preload"仅预加载不自动应用，async对link无效。

非关键 CSS 延迟加载，核心思路是：不阻塞页面渲染的前提下，等主体内容显示后再加载次要样式。最稳妥的做法是用 JavaScript 动态创建 标签并插入文档，同时设置 rel="stylesheet" 和 media="print"（或临时设为无效 media）来避免初始阻塞，加载完成后再切换为 media="all" 触发应用。

为什么不能直接用 rel="preload" 或 async？

CSS 文件天生具有渲染阻塞特性， 会同步下载并阻塞渲染；async 属性对 无效（仅适用于