Http请求 - IMG vs TEXT？

Question

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

第二行显示图像的检索.由于图像很小,因此所有图像数据都包含在同一数据包中的HTTP响应头中.

但是 - 下一个时间线显示当<img>标记位于文件开头附近时会发生什么,以便它位于IE接收的第一个数据包中:

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

因此,检索页面和图像所需的总时间更少

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

但是 - 通过我的示例,它显示当img位于顶部时页面加载速度更快.

我错过了什么？

PS我的问题是本节的简要概述

Answer 1

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

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