CSS延迟加载非关键样式怎么处理？次要CSS用JS异步引入

本篇文章向大家介绍《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 属性对 无效（仅适用于