HTTP请求 - 图像与文本哪个更好？

Question

这里展示的时间轴（使用IE的F12开发者工具捕获）说明了IE如何处理一个页面，其中一个标签位于一堆文本之后：

第二行显示了图像的检索。由于图像很小，所有图像数据都包含在HTTP响应头中的同一个数据包中。

然而 - 下一个时间轴显示了当标签靠近文件开头时发生的情况，以便它在IE接收的第一个数据包中：

但是，对图像的请求在HTML的第一个数据包到达后不久开始。

因此，检索页面和图像需要的时间更少。

但是（在我看来），最好将带有定义尺寸的图像放在页面底部。（这样页面加载会更快）

然而 - 通过我的例子，它显示了当img在顶部时页面加载更快。

我错过了什么？

- Royi Namir

---

“但是最佳实践总是建议将具有定义尺寸的图像放在页面底部……” 谁？需要参考资料。 - Alexander

@Alexander（在我看来），但尺寸应该是100％。然而，为什么总时间会改变？请查看我提供的链接。 - Royi Namir

浏览器在获得URL之前无法开始下载图像，因此您提供URL的越早，越好。 浏览器使用称为“预读”的策略来识别要下载的资源（http://blogs.msdn.com/b/ieinternals/archive/2010/04/01/ie8-lookahead-downloader-fixed.aspx）。 为什么这篇文章打上了“Fiddler”的标签？ 如果您正在运行Fiddler，则必须确保启用了流式传输（http://www.fiddler2.com/fiddler/help/streaming.asp）。 - EricLaw

@EricLaw 谢谢。确实与 Fiddler 无关。我会修复的... PS 这是否意味着我应该将图片放在顶部？（这样它们就可以尽快拥有 URL 了吗？） - Royi Namir

Answer 1

您漏掉了几个要点。首先，最佳实践不仅涉及下载，还涉及呈现，因为如果整个页面下载需要3秒钟，但另外2秒才能呈现，用户等待的时间是5秒而不是3秒。我不知道将图像放在底部的最佳做法（有关脚本的确有这样的最佳实践），我所知道的最佳实践是包括宽度和高度属性，这样您就不会在图像下载时阻止呈现。

您在测试中还遗漏了并行下载，因为浏览器限制并发连接数，而您只测试了一个图像。请使用更多图像或最好使用真实的网页进行测试，以获得可靠的结果。

- Maxim Krizhanovsky

---

您的部分内容无关紧要，因为当前只有6个并发连接限制，而我的示例仅讨论2个。我没有“缺少连接以处理所有请求”的问题。 - Royi Namir

我的观点是最佳实践并非针对你的特定情况编写，而是针对一般情况编写的，在这种情况下需要加载超过6个资源。 - Maxim Krizhanovsky

为什么第二个例子加载时间更短？IMG文本与文本IMG之间有何区别？ - Royi Namir

只是猜测：如果img、text、browser接收到img标签，那么在接收到text时解析它，并在完成解析text之前开始请求img。在text、img中，它首先接收html，然后解析它，然后下载img开始晚些。因此，在并行请求的情况下，第一种情况（img、text）在启动第二个下载线程之前没有延迟。 - Maxim Krizhanovsky

它是否必须下载整个HTML才能开始解析？ - Royi Namir

如果下载整个 HTML 开始解析，那就没有什么区别了。区别在于，如果图片在开头，它会更早地解析，并且下载也会更早开始；如果在结尾，它会更晚地解析，下载也会更晚开始。 - Maxim Krizhanovsky

Answer 2

我更愿意关注减少连接数量，而不是一次性加载整个页面。将界面和内容部分分开。一旦界面加载完成，它可以要求用户等待并告知他连接速度。然后放置进度条并告知用户事情的进展。

- Vasiliy Stavenko