48

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

语法大概是：

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

我只是不知道是否允许。

4

6 回答 6

38

Defer并且Async是标签<script> https://developer.mozilla.org/en/docs/Web/HTML/Element/script的特定属性

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

于 2014-09-17T12:38:23.767 回答
25

你可以这样做：

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

并创建一个 noscript 后备

于 2017-05-19T22:30:43.747 回答
16

截至 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>
于 2019-01-09T03:56:27.950 回答
11

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

于 2020-09-25T07:28:50.857 回答
2

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

它是如何测试的

  • 仅使用 Google Chrome 版本 61.0.3163.100（正式版）（64 位）测试
  • 在开发工具中使用了快速和慢速 3G 节流。

我测试的

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

前：

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

之后/结果：

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

所以看起来至少谷歌浏览器<link>也支持标签延迟，即使它没有公开记录在任何地方......

于 2017-10-27T06:54:35.533 回答
2

灯塔似乎是这样的：

<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>
于 2021-06-01T17:08:43.287 回答