Defer和Async是标记<script>https://developer.mozilla.org/en/docs/Web/HTML/Element/script的特定属性
它们在其他标签中不起作用，因为它们不存在。样式表不是包含并行执行或加载后执行的逻辑的脚本。样式表是一个静态样式的列表，这些样式原子地应用于html。

你可以这样做：

<link rel="stylesheet" href="/css/style.css" media="none" onload="if(media!=='all')media='all'" >

字符串
并创建一个noscript回退

贷方：https://www.giftofspeed.com/defer-loading-css/

在html文档的结束</body>标记上方添加以下内容

<script type="text/javascript">
  /* First CSS File */
  var giftofspeed = document.createElement('link');
  giftofspeed.rel = 'stylesheet';
  giftofspeed.href = '../css/yourcssfile.css';
  giftofspeed.type = 'text/css';
  var godefer = document.getElementsByTagName('link')[0];
  godefer.parentNode.insertBefore(giftofspeed, godefer);

  /* Second CSS File */
  var giftofspeed2 = document.createElement('link');
  giftofspeed2.rel = 'stylesheet';
  giftofspeed2.href = '../css/yourcssfile2.css';
  giftofspeed2.type = 'text/css';
  var godefer2 = document.getElementsByTagName('link')[0];
  godefer2.parentNode.insertBefore(giftofspeed2, godefer2);
</script>

字符串

截至2020年9月，我发现至少Chrome有原生支持，可以使用属性rel="preload"延迟CSS来异步加载文件

<link href="main.css" rel="stylesheet" rel="preload" as="style">

字符串
您可以使用更全面的方法，使用JavaScript使其与大多数浏览器兼容，并在未启用JS时包含noscript选项

<link href="main.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="main.css"></noscript>

型
来源：https://web.dev/defer-non-critical-css/

我在任何地方都找不到它的记录，但我的发现是：

如何测试

• 测试仅使用Google Chrome版本61.0.3163.100（正式版）（64位）
• 在开发工具中使用了Fast & Slow 3G节流。
  我测试的是

我有一个样式表导入自定义字体并应用字体。

之前：

使用自定义字体的文本是不可见的，直到它完全加载，然后它出现。

之后/结果：

所以added =>结果是，当页面开始呈现时，文本立即可见，但使用回退字体，然后过一段时间它切换到自定义字体。

所以看起来至少Google Chrome也支持对<link>标签的defer，即使它没有在任何地方公开记录...

Lighthouse似乎很喜欢这个：

<script>
  window.addEventListener('load', () => {
    let link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = "/path/to/style.css";
    document.head.appendChild(link)
  })
</script>

字符串