单个服务器请求的成本是多少

Question

我想知道你通过将所有需要下载的css脚本和东西放在一个文件中来获得多少胜利？

我知道你会通过使用精灵赢得很多,但在某些时候它可能会伤害到这一点.

例如,我的网站使用了很多小图标,大多数页面在将所有这些图标组合在一起后有不同的图标,总共可能超过500kb,但如果我每页制作一个精灵,它会减少到几乎50kb /页,所以这是凉.

但是脚本js/css怎么样才能通过为每个超过100行的页面制作一个脚本来赢得多少？或许我根本不会赢？

问题,基本上我想知道单个请求下载文件的成本是多少,并且使用现代浏览器和高速连接获得许多脚本/图像文件真的很糟糕.

编辑

谢谢大家对你的答案,这是困难的,因为每一个答案,没有回答我的问题来选择只有一个,我选择奖励的一个,在我看来,回答了有关请求我的问题成本最直接的,我不会接受任何的答案是正确的因为每个人都是.

Answer 1

多个请求意味着更多的延迟,因此通常会产生影响.究竟有多大的成本取决于响应的大小,服务器的性能,它所托管的世界,它是否被缓存等等......要获得真正的测量,你应该试验你的真实世界的例子.

我经常使用PageSpeed,并且通常遵循记录的最佳做法:https://developers.google.com/speed/docs/insights/about.

要尝试直接回答您的最终问题:额外的请求将花费更多.拥有多个文件并不一定"非常糟糕",但是如果可以的话,将内容组合到单个文件中通常是个好主意.

Answer 2

您的问题无法以真正的通用方式回答.

组合脚本和样式表有几个原因.

使用HTTP/1.1的浏览器将打开多个连接,每个主机通常为2-4.因为几乎每个站点都有实际的HTML文件和至少一个其他资源,如样式表,脚本或图像,所以在加载初始URL时就会创建这些连接index.html.

也就是说,您可以跨多个主机分割文件(例如另外一个static.example.com),这会增加主机/连接的数量,并可以加快下载速度.另一方面,由于更多连接和额外的DNS查找,这会带来额外的开销.

另一方面,有正当理由将文件拆分.

最重要的是HTTP/2.HTTP/2仅使用单个连接,并通过该连接多路复用所有文件下载.在线有多个演示证明了这一点,例如http://www.http2demo.io/

如果您将文件拆分,也可以单独缓存它们.如果您只更换了小部件,浏览器可以重新加载更改的文件,其他所有文件都将被使用304 Not Modified.你应该有适当的缓存标题.

也就是说,如果您拥有资源,则可以使用HTTP/2为支持它的客户端单独提供所有文件.如果您有许多较旧的客户端,那么当他们使用HTTP/1.1发出请求时,您可以回退到它们的组合文件.

Answer 3

棘手的问题:)

当然,琐碎的答案是更多的请求需要更多的时间,但这不一定很简单.

浏览器打开多个http连接到同一主机,请参阅http://sgdev-blog.blogspot.hu/2014/01/maximum-concurrent-connection-to-same.html因为这不是使用并行下载而是下载一个巨大的文件被http://www.sitepoint.com/seven-mistakes-that-make-websites-slow/视为性能瓶颈
Web服务器应尽可能使用gzip内容编码.因此,HTML,JS,CSS等文本资源的大小都被压缩了.
大多数资产都是静态内容,因此标准Web服务器应对其使用etag缓存.这意味着下次下载将是26个字节,因为服务器告诉"未更改"而不是再次发送32kbyte的JavaScript
由于etag缓存,整个网站应该是可缓存的(我假设您正在编写游戏或类似的东西,而不是一些老式的J2EE servlet页面).
我建议制作2-4个大文件并下载,如果你真的想去大文件

所以把它放在一起:

请确保您没有动态提供静态内容.即尝试将图像加载到Web浏览器,打开网络流量视图,使用F5重新加载并看到您从服务器获得304未修改,而不是200 OK和实际流量.最大的性能优化是你不从服务器中提取任何东西,如果使用得当它开箱即用:)