为什么 CSS 预加载不起作用或根本不应用样式？答案

【问题标题】：Why does CSS preload doesn't work or apply styles at all?为什么 CSS 预加载不起作用或根本不应用样式？
【发布时间】：2021-09-14 09:53:08
【问题描述】：

在instructions from Mozilla.org 之后，我为 CSS 预加载创建了这个非常简单的示例，但它不起作用。

当前行为：背景为白色

预期行为：背景应该是红色的，并且控制台中会显示一条奇怪的消息。

cssPreloadTest3.html：

<html>
  <head>
    <meta charset="utf-8">
    <title>CSS preload example</title>
    <link rel="preload" href="cssPreloadTest2.css" as="style">
  </head>
  <body>
    <h1>bouncing balls</h1>
  </body>
</html>

cssPreloadTest2.css：

body {
    background: red;
}

控制台中奇怪的消息说：

预加载链接预加载的“https://..../cssPreloadTest2.css”资源在几秒钟内未使用。确保 preload 标签的所有属性设置正确。

当然，如果您将 <link> 更改为像这样的标准 css 导入，它可以正常工作：

<link rel="stylesheet" href="cssPreloadTest2.css">

¿我怎样才能完成这项工作？

【问题讨论】：

标签： html css seo preload

【解决方案1】：

基本上，预加载意味着浏览器必须先下载资源，然后浏览器才会出于某种目的使用它。当您预加载 CSS 时，这意味着浏览器将尽快开始下载您的资源并在找到合适的命令时应用它，例如当它找到样式表的 <link> 标记时，它将立即应用它，因此第一个内容绘制将有待改进。

这里还有一个概念。如果您将 CSS 作为非关键资源下载，则无需包含 <link> 标签。

语法：-

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

但是这个东西只适用于延迟非关键的 CSS。但是对于关键的 CSS，您可以包含一个内部样式表，即在 <style>...</style> 标签中。

在此处了解更多信息 - https://web.dev/defer-non-critical-css/

【讨论】：

【解决方案2】：

预加载<links> 并不是要取代标准的<link rel="stylesheet">，它们只是告诉浏览器预加载资产。因此，您仍然必须以任何常规方式（<link rel="stylesheet"> 或 @include）包含样式。

他们可能应该在 Mozilla 网站上澄清这一点......

【讨论】：