在 HTML 页面加载序列中可以发出图像请求的最早可能时间是什么时候？
我参与的一个网站正在改用 sprite 页面。 Sprite 页面可能非常大，第一页的整体页面加载时间大大受益于浏览器提前发出的请求。这些页面还包含繁重的 CSS 和 JS 负载，如果仅在这些完成后才启动 sprite-page 加载，那就太糟糕了。
我发现最快的整体加载时间是创建一个超短的 CSS 文件，在 HTML head 部分的前面引用，它引用类中的图像。这通常会在其他 CSS 和 JS 在现代浏览器中完成加载(允许的连接数)之前启动图像请求。其他技术似乎至少延迟到 CSS 在启动图像请求之前全部加载。
但是，我不喜欢这种技术，因为它引入了比看起来必要的更多的往返和更多的文件，与直接从HTML。但是，引用 HTML 正文中的图像等，似乎会导致请求等到 head CSS 全部加载完毕。在这个(臃肿的)应用程序中，更明显的解决方案——不费吹灰之力，在主 CSS 中自然地引用它，包括作为 body 中的图像——都明显慢了大约 200 毫秒到 300 毫秒。
也许有一种很好的方法可以在 HTML 头部中极早地引用图像，这可能会导致至少一些现代浏览器极早地加载它？ (也许是某种特殊的、奇怪的链接标签？
任何关于现代加载顺序的良好在线解释也会有所帮助(但不是问题的答案)。
我们有一个基于 headless 浏览器的良好、稳健的加载时间测试，它允许我们在我们页面的真实配置文件上使用各种人工延迟和带宽测试加载时间到 10 毫秒的精度，这些差异在统计上是显着的.因此，我很乐意在答案中采用未经测试的建议并将其纳入框架。
[我知道在许多情况下，CSS 中的数据 URL 和 WOFF 中的图标作为 dingbats 是比 sprite-pages 更好的技术，但并非在所有图像的所有情况下都是如此(我们有数据要显示) ，并且这种 sprite-pages 的使用是复杂应用程序迁移路径的一部分]。
最佳答案
我建议您将该 CSS 部分内联到您的 HTML 中，例如:
<head>
<title>(...)</title>
<style>
/* your inline style */
</style>
<!-- other link tags, maybe scripts, etc -->
</head>
关于javascript - HTML 页面中图像的最早预加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33447023/