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

问题描述 投票：0回答：4

在 HTML 页面加载序列中，可以发出图像请求的最早可能时间是多少？

我参与的一个网站正在改用精灵页面。精灵页面可能非常大，并且第一页的整体页面加载时间大大受益于浏览器尽早发出的此请求。这些页面还包含大量 CSS 和 JS 负载，如果在这些完成后才启动精灵页面加载，那就太糟糕了。

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

但是，我不喜欢这种技术，因为它比看起来必要的多引入了一次往返和多了一个文件，与直接从 HTML 发起图像请求的技术相比，这可能会增加 50ms-100ms 左右的加载时间。然而，引用 HTML 正文中的图像等似乎会导致请求等待，直到 head CSS 全部加载。而更明显的解决方案——不费吹灰之力，在主CSS中自然地引用它，包括作为正文中的图像——在这个（臃肿的）应用程序中都明显慢了大约200ms-300ms。

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

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

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

[我知道，在很多情况下，CSS 中的数据 URL 和 WOFF 中的图标作为 dingbats 是比精灵页面更好的技术，但并非所有图像（我们有数据要显示）的所有情况都是如此，并且精灵页面的这种使用是复杂应用程序迁移路径的一部分]。

javascript css image performance css-sprites
4个回答
1
投票

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

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

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

另外本文档建议使用 async 属性和 rel="import" 来防止阻塞。因此，结合这些建议会给出

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

祝你好运！

1
投票

您可以在 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>
标签。

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

0
投票

在头部使用 rel=preload。

在头部，在最早方便的地方，插入：

<head>
  ...
  <link rel="preload" href="my-big-image.webp" as="image" />
  ...
</head>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.