javascript - Http 请求 - IMG 与 TEXT？

Question

此处显示的时间线（使用 IE 的 F12 开发人员工具捕获）说明了 IE 如何处理<img>标签位于以下内容之后的页面text：

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

但是 - 下一个时间线显示了当<img>标签位于文件开头附近时会发生什么，因此它位于 IE 接收的第一个数据包中：

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

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

但是（恕我直言）最好将图像（具有定义尺寸）放在该页面的底部。（以便页面加载更快）

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

我错过了什么？

PS我的问题是本节的简要总结文本

Answer 1

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

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

Answer 2

我宁愿为减少连接数量而烦恼， - 一次加载整个页面。拆分界面和内容部分。加载界面后 - 它可以要求用户等待并通知他连接速度。然后放置一个进度条并告知用户事情的进展情况。