HTTP/2 服务器两次推送资产下载

Posted 2023-03-10

【中文标题】HTTP/2 服务器两次推送资产下载

【英文标题】：HTTP/2 server pushed asset downloading twice

【发布时间】：2019-10-10 22:45:49

【问题描述】：

我正在尝试使用由 Cloudflare 提供支持的 HTTP/2 服务器推送。我正在尝试使用以下 HTTP 标头推送两个资产...

Link: </img/whysoslow-hero.jpg>; rel=preload; as=image, </lib/bootstrap.min.css>; rel=preload; as=style

图像在样式表中作为背景图像被引用，并且被推送并正确使用（下载一次）。

但是，我在我的页面的 html 中引用样式表，就像这样...

<link rel="stylesheet" href="/lib/bootstrap.min.css">

...它正在被推送，但随后也被提取（下载了两次）。

我的网站是...https://whysoslow.co.uk

这是 Chrome 中“网络”选项卡的屏幕截图，显示资产已被推送，但随后样式表又被下载...

谁能向我解释为什么会发生这种情况以及我该如何解决？

编辑：

我已经注意到控制台说...

已找到“https://whysoslow.co.uk/lib/bootstrap.min.css”的预加载，但由于完整性不匹配而未使用。

所以是 SRI 检查失败了。但我不明白为什么，它正在获取相同的文件，所以它应该是相同的。为什么它们不一样？

【问题讨论】：

您为什么要对您的域所服务的资产使用 SRI？这通常用于其他域上不受您控制的资产（然后您无法推送）。

我使用 Gulp - 资产最初是从 CDN 加载的，但在我进行性能改进时将它们移动到本地托管。我现在已经删除了 SRI，因为就像你说的，现在没有必要了。

【参考方案1】：

既然我已经弄清楚了，我也设法找到了答案......

How to preload script using integrity and crossorigin

简答：您不能预加载和使用 SRI，目前尚不支持。