Http request - IMG vs TEXT？

如下所示（使用IE的F12开发人员工具捕获）的时间表说明了IE如何处理页面其中一个<img>标签一堆text的后位于：Http request - IMG vs TEXT？

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

然而 - 接下来的时间线显示，使其在通过IE浏览器接收数据的第一个数据包的时候<img>标签位于文件的接近开始会发生什么：

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

结果，它需要更少的总时间来对页面的底部检索页面和图像

但（恕我直言）最好是把镜像文件（包括定义尺寸）。（以便页面加载速度更快）

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

我错过了什么？

P.S.我的问题是一个简短的摘要文本of this section

来源

2012-12-19 Royi Namir

“* ...但最佳实践总是说把图像（具有定义的尺寸）放在该页面的底部...... *，”谁？需要参考 – Alexander

@Alexander（添加恕我直言），但尺寸应该在那里（100％）。仍然，为什么总体时间在变化？请查看提供的链接。 –

浏览器只有拥有其网址才能开始下载图片，因此越早提供网址越好。浏览器使用名为Lookahead的策略来识别要下载的资源（http://blogs.msdn.com/b/ieinternals/archive/2010/04/01/ie8-lookahead-downloader-fixed.aspx）。为什么这篇文章用“Fiddler”标记？如果您正在运行Fiddler，则必须确保已启用流式传输（http：//www.fiddler2。COM /小提琴手/帮助/ streaming.asp）。 – EricLaw

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

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

来源

2012-12-19 08:54:49

你的部分是无关紧要的，因为目前有6个并发连接限制，我的例子只讨论了2.我没有“缺少连接来处理所有请求“/ –

我的观点是最佳实践不是针对您的特定情况编写的，但是对于一般情况下需要加载6个以上资源的情况 –

不过，为什么第二个示例的加载时间更短？ IMG文本与文本IMG有什么区别？ –

我宁愿打扰少数连接， - 一次加载整个页面。分割界面和内容部分。一旦加载界面 - 它可以要求用户等待并通知他有关连接速度。然后放置一个进度条并通知用户事情进展情况。

来源

2012-12-19 09:29:12

Http request - IMG vs TEXT？

回答

相关问题