Question

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

我参与的网站正在转向使用精灵页面。精灵页面可能非常大，第一页的整个页面加载时间大大受益于浏览器早期发出的请求。这些页面还包括繁重的CSS和JS加载，只有在这些加载完成后启动精灵页面加载才会非常糟糕。

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

然而，我不喜欢这种技术，因为它引入了一个比往往更多的往返和一个文件，与可以直接从图像请求启动图像请求的技术相比，加载时间可能增加50ms-100ms左右。 HTML。但是，引用HTML正文中的图像等似乎会导致请求等到头部CSS全部加载完毕。更明显的解决方案 - 不是出汗，在主要CSS中自然地引用它，包括身体中的图像 - 在这个（臃肿的）应用程序中都会大约200ms-300ms的速度变慢。

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

现代装载顺序的任何良好的在线解释也会带来好处（但不是问题的答案）。

我们有一个基于无头浏览器的良好，强大的加载时间测试，它允许我们在页面的真实轮廓上测试加载时间到10ms的准确度，以及各种人工延迟和带宽，这些差异具有统计意义。因此，我很高兴在答案中采用未经测试的提案并将其通过框架。

[我知道在很多情况下，CSS中的数据网址和WOFF中的dingbats图标比精灵页面更好，但在所有图像的情况下都不是这样（我们有数据显示），精灵页面的这种使用是复杂应用程序迁移路径的一部分]。

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

更新：请参阅以下Supersharp的评论，这些评论更正了我最初使用的rel =“prefetch”，建议使用rel =“import”。

同样this document建议使用带有rel =“import”的async属性来阻止阻止。因此，结合这些建议将给予

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

祝你好运！

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

3 个答案: