HTML 页面中图像的最早预加载答案

【问题标题】：Earliest preload for an image in an HTML pageHTML 页面中图像的最早预加载
【发布时间】：2015-11-02 05:18:38
【问题描述】：

在 HTML 页面加载序列中最早可以发出图像请求的时间是什么时候？

我参与的一个网站正在改用精灵页面。精灵页面可能非常大，第一页的整体页面加载时间极大地受益于浏览器提前发出的这个请求。这些页面还包括繁重的 CSS 和 JS 加载，仅在这些完成后才启动精灵页面加载会很糟糕。

我发现最快的整体加载时间是创建一个超短的 CSS 文件，在 HTML 头部部分的前面提到过，它引用了一个类中的图像。这通常在其他 CSS 和 JS 在现代浏览器中完成加载（允许的连接数）之前启动图像请求。其他技术似乎至少会延迟到 CSS 全部加载完毕后再发起图像请求。

但是，我不喜欢这种技术，因为它引入了一个似乎不必要的往返行程和一个文件，与直接从HTML。但是，在 HTML 正文等中引用图像似乎会导致请求等到头部 CSS 全部加载完毕。而更明显的解决方案——不费吹灰之力，在主 CSS 中自然地引用它，包括作为正文中的图像——在这个（臃肿的）应用程序中都慢了大约 200 毫秒到 300 毫秒。

也许有一种好方法可以极早地在 HTML 头部中引用图像，这可能会导致至少某些现代浏览器极早地加载它？（也许是某种特殊的、奇怪的链接标签？

任何关于现代加载顺序的良好在线解释也将是有益的（但不是问题的答案）。

我们有一个基于无头浏览器的良好、强大的加载时间测试，它允许我们在页面的真实配置文件上使用各种人工延迟和带宽来测试加载时间精确到 10 毫秒，这些差异在统计上是显着的.所以我很高兴在答案中采用未经测试的提案并将其放入框架中。

[我知道在许多情况下，CSS 中的 data-urls 和 WOFFs 中作为 dingbats 的图标是比 sprite-pages 更好的技术，但并非在所有图像的所有情况下都是如此（我们有数据要显示），而这种 sprite-pages 的使用是复杂应用程序迁移路径的一部分]。

【问题讨论】：

标签： javascript css image performance css-sprites

【解决方案1】：

我建议您将该 CSS 部分内联到您的 HTML 中，例如：

<head>
  <title>(...)</title>
  <style>
    /* your inline style */
  </style>
  <!-- other link tags, maybe scripts, etc -->
</head>

【讨论】：

这当然值得一试。我会试一试（如果有的话，还有其他答案）并报告。谢谢！

【解决方案2】：

更新：请参阅下面来自Supersharp 的 cmets，它更正了我最初使用 rel="prefetch"，建议改为使用 rel="import"。

另外this document 建议使用带有 rel="import" 的 async 属性来防止阻塞。所以结合这些建议会给

<head>  
...  
<link rel="import" href="/path/to/large-background-image.jpg" async>
...  
</head>

祝你好运！

【讨论】：

这很好。我去试试，谢谢！如果有适当的标准做事方式总是好的。
我认为下载不会优先于其他后续下载调用。 prefetch 只能在浏览器空闲时启动。
嘿@Supersharp，我认为你是对的，感谢您接受这个，我已经更新了我的答案
也许改用rel="import" 可以工作（但仅适用于 Chrome 和 Opera）。
另一个好建议@Supersharp，谢谢。我再次更新了我的答案；）

【解决方案3】：

您可以在 HTML 页面顶部的 <title> 标记之后添加一个脚本，该脚本将执行异步 HTTP 请求：

<html>
<head>
  <title></title>
  <script>
   var xhr = new XMLHttpRequest
   xhr.open( "GET", "http://your-sprite-page", true )
   xhr.send()
  </script>
  ...

无论如何，根据异步请求的供应商实现，也许最好的方法是在正文部分包含一个<img hidden> 标记。

开发工具时间线是你的朋友。

【讨论】：

这有点难看，但如果这是最快的方法，那就没问题了。我试试看，谢谢！