Question

我知道脚本文件可以在资源包含上使用DEFER和ASYNC关键字。这些关键字是否也适用于样式表（即CSS）包括？

语法可能是：

<link rel="stylesheet" type="text/css" href="./path/to/style.css" defer />

我只是不知道是否允许。

Answer 1

Defer和Async是代码<script> https://developer.mozilla.org/en/docs/Web/HTML/Element/script

的特定属性

它们不适用于其他标签，因为它们不存在。样式表不是包含要并行执行或在加载后执行的逻辑的脚本。样式表是一个静态样式列表，可以原子方式应用于html。

Answer 2

你可以这样做：

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

并创建一个noscript后备

Answer 3

截至2019年1月，此StackOverflow帖子在某些Google搜索中仍然排名第一。因此，我正在为那些试图推迟加载CSS的人提供这个非常的最新答案。

信用： 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>

Answer 4

截至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/

Answer 5

我无法在任何地方找到它，但我的发现是：

如何测试

使用谷歌浏览器版本61.0.3163.100（正式版）（64位）测试仅
使用Fast＆amp;开发工具中缓慢的3G限制。

我测试了什么

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

<强>之前：

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

<强> /结果后：

所以添加=＆gt;结果是文本在页面开始渲染时立即可见但使用后备字体，然后一段时间后切换到自定义字体。

所以看起来至少谷歌浏览器支持推迟<link>标签，即使它没有公开记录......

Answer 6

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>

样式表上允许的DEFER或ASYNC包括？

6 个答案: