资源预加载在HTTP头部和响应标签中有什么权衡之处？

Question

因此，预加载可以通过声明性标记作为标签进行定义。https://w3c.github.io/preload/

<link rel="preload" href="/styles/other.css" as="style">

作为HTTP标头：

Link: <https://example.com/other/styles.css>; rel=preload; as=style

但是这两者之间有什么权衡取舍？在什么情况下应该使用标签，反之亦然？

- Simon

Answer 1

显然，如果在HTML中存在需要解析的内容，你需要解析HTML。这是在解析标题之后发生的，因为你需要标题来知道首先解析HTML而不是像image/jpeg或text/plain。

实际上，这是否会导致性能差异取决于具体情况，这通常是无法确定的，正如大多数性能问题一样。主要的重点仍然是将I / O与执行分离，这对两种方法都适用。

CDN和代理通常使用标头进行各种访问优化和缓存。这显然比解析HTML更便宜，因此可能会看到某些相关建议:)例如，我可以想象一个代理，在甚至获得HTTP标头之前就基于HTTP标头启动预加载-只通过观察通常意味着什么样的请求来预测。当预测正确时，它可以很好地消除获取此内容的延迟，特别是对于高延迟连接和长时间运行的请求。

- Luaan

Answer 2

（试图为@Luaan的答案增添一些有价值的内容）

我认为这不会造成实质性的差异。否则，对于所有CSS文件，始终拥有类似以下的头部将是一件好事：

Link: </styles.css>; rel=preload; as=style

所以浏览器可以在解析HTML之前开始下载CSS文件（通常是阻塞的）。但是我从来没有在任何地方看到过这个建议。我在本地主机上进行的个人测试似乎只能在Chrome中节省1毫秒。

- Pere