javascript - Http 请求 - IMG 与 TEXT？

Question

此处显示的时间线(使用 IE 的 F12 开发人员工具捕获)说明了 IE 如何处理页面哪里有<img>标记位于一堆 text 的之后 :

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

然而 - 下一个时间线显示了当 <img>标记位于文件的开头附近，因此它位于 IE 接收到的第一个数据包中:

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

因此，检索页面和图像花费的总时间较少

但是(恕我直言)最好将图像(具有定义的尺寸)放在该页面的底部。 (这样页面会加载得更快)

但是 - 根据我的示例，它表明当 img 位于顶部时页面加载速度更快。

我错过了什么？

附言我的问题是一个简要总结的文本 of this section

Answer 1

您遗漏了几点。首先，最佳实践不仅涉及下载，还涉及渲染，因为如果整个页面下载 3 秒但需要另外 2 秒进行渲染，则用户等待 5 秒，而不是 3 秒。我不知道将图像放在底部的最佳做法(脚本有这样的做法)，我知道的最佳做法是包含宽度和高度属性，这样您就不会在下载图像时阻止渲染。

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