Performance HTTP请求与文件大小？
如果这意味着页面大小减小，那么在什么情况下拥有更多HTTP请求更好？例如，如果我有一个20KB的图像，在使用两个图像变得更有意义之前，我需要缩小多少大小？实际的答案是永远不会，尤其是当您谈论的数据量相对较小时，比如一个或两个KB 网页性能的真正敌人不是传输的字节数；相反，它是网络延迟。让我们举一个例子，考虑一个5 Mb/s的连接（美国的平均连接速度稍微超过了一点），在80ms的服务器上ping一次：Performance HTTP请求与文件大小？,performance,http,Performance,Http,如果这意味着页面大小减小，那么在什么情况下拥有更多HTTP请求更好？例如，如果我有一个20KB的图像，在使用两个图像变得更有意义之前，我需要缩小多少大小？实际的答案是永远不会，尤其是当您谈论的数据量相对较小时，比如一个或两个KB 网页性能的真正敌人不是传输的字节数；相反，它是网络延迟。让我们举一个例子，考虑一个5 Mb/s的连接（美国的平均连接速度稍微超过了一点），在80ms的服务器上ping一次： 1x 20 kB files: 80ms latency + 31ms transfer ti
1x 20 kB files: 80ms latency + 31ms transfer time = 111ms
2x 4 kB files: 160ms latency + 13ms transfer time = 173ms
还考虑到你现在使用一个额外的有限数量的并行请求，浏览器将（大约2到8个取决于浏览器）的图像的一半，而不是更有价值的东西，如脚本，CSS，或其他不可煽动的图像。这将减慢页面的总加载时间
此外，我怀疑你的整个前提是有缺陷的。通常，将图像拆分为两个文件并不能真正产生更小的总体文件大小，因为每个图像容器格式都有头数据；例如，PNG文件在任何实际图像数据之前至少有57字节的开销。另外，额外的HTTP请求意味着额外的±800-900字节的开销 我怀疑你会发现一个PNG不会比组成同一图像的两个PNG的总大小大（来源：）
（1027字节）
（来源：）
（来源：）
（730+809=1539字节）
尽管第一个PNG有150x100像素的“死”透明空间，但它比代表同一图像的两个PNG小33%。（忽略我不能在这里正确对齐
1x 20 kB files: 55ms latency + 7ms transfer time = 62ms
2x 4 kB files: 110ms latency + 2 ms transfer time = 112ms
请求实际上只有几百个字节。没有理由拆分图像以减小大小，因为部分大小的总和将大于原始文件的大小（每个文件都包含一个标头，这会占用空间）。请求越少越好。具有20 KB的1个rq性能优于具有10KB+的2个rq10KB@dotoree在某些情况下，您可以通过将图像拆分为多个图像文件来大大减小图像的大小。这就是我要问的。我不是将一个20KB的文件拆分为两个10KB的文件，而是将其拆分为两个4KB的文件（例如）。在什么情况下拥有多个文件会更好？@MikeH你完全走错了路。有完全相反的模式可以在一个视图中查看所有图像@我知道并使用css精灵吗。如果情况变得更容易，我可以扭转局面。假设您有两个4KB图像。在什么情况下，将这两个图像组合起来不再值得了。当单个图像为20KB时？更多少？我很感激你的回答。我想说的是，有些地方可以缩小文件大小。比如，第一次让我想到这个的情况。我需要一个渐变背景，使其在顶部和底部变得透明和逐渐变细。我可以使用一个大的图像，或者为大多数渐变制作一个1px高的图像，并为末端制作单独的图像。这将减少80%的大小，但会添加2个HTTP请求。另外，如果答案真的是“从来没有”，理论上我可以把一个网站上的每一张图片放到一个CSS精灵中，一个页面只能调用一张图片。@MikeH，渐变背景是他们自己的挑战，但为什么不呢？无论如何，这就是我说“一般”的原因——在某些情况下，你需要单独的图像，比如在两个轴上重复的背景。（在一个轴上重复的背景仍然可以被精灵化——对于x轴重复，将背景堆叠在y轴上，并将背景拉伸到输出图像的宽度上。这就是它的原理。）当然，我并不是建议你将所有图像都放入精灵中——那将是愚蠢的。要保持HTTP往返效率和客户端缓存寿命，需要采取平衡措施。换言之，将可能更改的图像放在精灵中会适得其反，因为即使只有一小部分更改，整个内容也必须重新下载。我的经验是设计元素/小图标（通常是PNG）进入精灵，图片（通常是JPEG）是它们自己的文件。我也了解CSS渐变。在我解释的例子中，在这种情况下，在使IE看起来很好的同时，不可能使用CSS渐变。在你说只使用图像作为IE的依据之前，我必须回去再次问我原来的问题。不过，这只是一个例子。为什么每个人都认为我对问题的基本原则一无所知？是的，需要保持平衡。这就是我问题的重点——找出天平倾斜的点。@mikeh可能有一些边缘情况，两个图像比打开的效率更高，但我猜只有在延迟较低的环境中才适用。找到答案的方法是在不同的带宽和延迟场景中使用一些精心设计的映像进行测试。别忘了考虑慢启动可能会使事情变得复杂。