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

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/

要点

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

<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 具有本机支持，可以使用属性延迟 CSS 以rel="preload"异步加载文件

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

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

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