未应用 Http/2 预加载的 css 并被视为未使用答案

【问题标题】：Http/2 preloaded css is not applied and considered unused未应用 Http/2 预加载的 css 并被视为未使用
【发布时间】：2019-01-07 20:36:00
【问题描述】：

我正在尝试获取一个简单的 http/2 服务器推送演示，以使用以下简单的 hello world 示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Http 2 push demo</title>
    <link rel="preload" href="core.css" as="style">
</head>
<body>
 Hello World!
</body>
</html>

core.css

body {
    font-size: larger;
    font-weight: bold;
    color: red;
}

在 Chrome 66.0.x 中，css 似乎已成功加载，但我不断收到以下警告：

资源http://localhost:8080/core.css 已使用链接预加载进行预加载，但在窗口加载事件后的几秒钟内未使用。请确保它请确保它具有适当的as 值并且是有意预加载的。

并且 css 不应用于 html 正文。

我错过了什么吗？有什么想法吗？

【问题讨论】：

现在您仅预加载资源，但之后您不会以任何方式使用它。您仍然需要一个“普通”<link rel="styesheet" href="core.css"> 才能将该样式表实际嵌入到文档中并应用它。
确实！我希望预加载链接实际替换样式表引用。现在它起作用了。谢谢@CBroe
正确，这就是为什么预加载对 CSS 毫无意义。它更适用于不明显的资源（例如，样式表引用的字体在下载样式表之前不会被看到）。请参阅此处了解更多信息：smashingmagazine.com/2016/02/preload-what-is-it-good-for

标签： html css http2

【解决方案1】：

现在您只是预加载资源，但之后您不会使用它。

您仍然需要一个“普通”<link rel="styesheet" href="core.css"> 才能将该样式表实际嵌入到文档中并应用它。

【讨论】：