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

Question

在 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;
}

控制台中的奇怪消息说：

The resource at “https://..../cssPreloadTest2.css” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

当然，如果您将 <link> 更改为标准的 css 导入，则效果很好：

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

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

Answer 1

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

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

Answer 2

基本上，预加载意味着浏览器必须先下载资源，然后浏览器才能出于某种目的使用资源。当您预加载 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/

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

Why does CSS preload doesn't work or apply styles at all?

html

css

seo

preload