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

Question

我想知道您将所有需要下载的css脚本和内容放在一个文件中会赢多少？

我知道你会通过使用精灵赢得很多，但在某些时候这样做可能会受到伤害。

例如，我的网站使用了很多小图标，大多数页面在将所有这些图标组合在一起后有不同的图标，总共可能超过500kb，但如果我每页制作一个精灵，则减少到近50kb /页面，这很酷。

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

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

修改

谢谢大家的答案，很难只选择一个，因为每个答案都回答了我的问题，我选择奖励那个我认为最直接回答我关于请求费用的问题的答案，我不会接受任何答案。回答是正确的，因为每个人都是。

Answer 1

多个请求意味着更多延迟，因此通常会产生影响。究竟如何代价取决于响应的大小，服务器的性能，托管的世界，它是否被缓存等等。要获得真实的测量结果，你应该试验你的真实世界的例子。

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

要尝试直接回答您的最终问题：其他请求的费用会更高。它不一定非常糟糕＆＃34;有很多文件，但是如果可以的话，将内容组合成一个文件通常是一个好主意。

Answer 2

您的问题不是以真正的通用方式回答。

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

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

• TCP连接成本很高。这就是浏览器提前直接打开多个连接的原因。
• 连接通常限制为少量，每个连接一次只能传输一个文件。

也就是说，您可以跨多个主机分割文件（例如额外的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因为，不使用并行下载而是下载一个巨大的文件被{{3}视为性能瓶颈}
• Web服务器应尽可能使用gzip内容编码。因此，HTML，JS，CSS等文本资源的大小都被压缩了。
• 这些资产中的大部分都是静态内容，因此标准Web服务器应对其使用etag缓存。这意味着下次下载将是26个字节，因为服务器告诉＆＃34;没有改变＆＃34;而不是再次发送32kbyte的JavaScript
• 由于etag缓存，整个网站应该是可缓存的（我假设您正在编写游戏或类似的东西，而不是一些老式的J2EE servlet页面）。
• 我建议制作2-4个大文件并下载，如果你真的想要大文件

所以把它放在一起：

• 如果你只有静态内容，那就完全一样了，因为etag缓存会快速从服务器下载任何实际内容，服务器返回304未修改答案
• 如果您有一些生成的动态内容（例如servlet页面），请将JS和CSS分开，因为它们可以单独进行etag缓存，并且只需要下载servlet页面
• 检查您的服务器是否支持压缩的gzip内容编码，这有很大帮助：）
• 如果您有多个动态内容（例如多个动态更改图像），将它们表示为2-4个单独的图像以利用并行的http连接进行下载是有意义的（尽管我很难想象这个用例在现实生活）

请确保您未动态提供静态内容。即尝试将图像加载到Web浏览器，打开网络流量视图，使用F5重新加载并看到您从服务器获得304 Not modified，而不是200 OK和实际流量。 最大的性能优化是您不会从服务器中提取任何内容，如果使用得当，它就会开箱即用：）

Answer 4

我认为@DigitalDan有最好的答案。

但问题掩盖了真实问题，如何让我的页面加载更快？或者至少，APPEAR加载速度更快......

我会添加一些关于“首屏”的内容：基本上你想要内联尽可能让你的页面在第一次往返时呈现主要的可见内容，因为这是用户认为最快的内容，并确保页面上没有任何其他内容阻止......

Archibald解释得很好：

https://www.youtube.com/watch?v=EVEiIlJSx_Y

Answer 5

如果您使用任何这些类型，您获胜多少可能会因您的具体需求而有所不同，但我会谈谈我的情况：在我的网络应用程序中，我们不会合并所有文件，而是有两种类型的文件，公共文件和每页文件，我们有应用程序全局需要的公共文件，以及仅用于其案例的其他文件，这就是原因。

以上是我的网络应用程序的图表请求分析，您需要考虑的是这个

在此之后缓存DNS查找只发生一次，但是，DNS名称可能已缓存，然后。

根据我们的每个请求：

request start + initial connection + SSL negotiation+ time to first byte + content download

在大多数情况下占用大部分请求时间的主要因素是内容下载大小，因此如果我有多个文件需要在所有页面中使用它们，我会将它们合并到一个文件中，这样我就可以另一方面，如果我需要在特定页面中使用文件，请保存TCP堆栈时间，我会将其分开，以便将内容下载时间保存在其他页面中。

Answer 6

许多Web开发人员面临的非常相关的问题（主题）。

我还要在这个问题的其他贡献者中添加我的答案。

回答之前的介绍

高性能网站取决于不同的因素，这里有一些考虑因素：

• 网站大小
• 网站的内容类型（主要内容文字，图片，视频或混合物）
• 您网站上的流量（平均访问您网站的人数）
• 网络托管位置与您的主要访问者位置（在您所在的国家/地区，全球范围内），如果您的网站位于欧洲并且您的主机位于美国，则非常重要。
• 网络主机服务器（硬件）技术，我更喜欢SSD磁盘。
• 如何设置和优化网络服务器（软件）
• 是动态网站还是静态网站
• 如果是动态的，您的代码和数据库的结构和设计方式

通过定义您的需求，您可能能够找到合适的策略。

关于您的一般问题

对您的网站有何看法。我建议你在他的书高性能网站中查看Steve Souders 14的建议。

Steve Souders 14建议：

1. 减少HTTP请求数
2. 使用内容分发网络（CDN）
3. 添加过期标题
4. Gzip Components
5. 将样式表放在顶部
6. 将脚本放在底部
7. 避免使用CSS表达式
8. 尽可能使JavaScript和CSS外部
9. 减少DNS查找
10. 缩小JavaScript
11. 避免重定向
12. 删除重复的脚本
13. 配置ETages
14. 使Ajax可以缓存

关于你的问题

因此，如果我们考虑以下js/css将会有很多帮助：

1. 最好在不同的文件上使用不同的代码。
   示例：您可能有page1，page2，page3和page4。
   Page1和page2使用js1和js2
Page3仅使用js3
Page4使用所有js1，js2和js3 所以在3个文件中使用JavaScript是个好主意。你不想把你不拥有的所有东西都包括在内。
2. CSS Sprites
3. 顶部的CSS和最后的JS
4. 缩小JavaScript
5. 将您的JavaScript和CSS放在外部文件中
6. CDN，如果您使用jQuery，请不要将其下载到您的网站，只需使用推荐的CDN地址。

结论

我很确定有更多细节要写。并非所有建议都是必要的，但重要的是要了解这些建议。正如我之前提到的，我建议你阅读这本小书，它会给你更多细节。最后，没有完美的最终解决方案。你需要开始一些地方，尽力而为并改进它。没有什么是永恒的。

祝你好运。

Answer 7

你的问题的答案实际上取决于它。

页面加载优化的最终目标是让您的用户感觉您的页面加载速度很快。

一些建议：

• 不要合并常见的库js css文件，例如jquery coz，当你访问其他网站时，他们可能已经被浏览器缓存，所以你甚至不需要下载它们;

• 合并资源，但至少单独的第一个屏幕需要资源，其他人因为早期用户可以看到一些有意义的东西，他们对页面的感觉越快;

• 如果您的多个页面共享了一些资源，请将共享资源和页面特定资源的合并文件分开，这样当您访问第二页时，共享的页面可能已被浏览器缓存，因此页面加载更快;

• 用户可能正在使用速度缓慢或不一致的手机3g / 4g网络，所以即使是50k的数据或2个以上的请求也会让他们感觉不同;

Answer 8

拥有很多100行文件真的很糟糕，而且只有一两个大文件也很糟糕，不过每种类型都有css / js / markup。

桌面主要是高速连接，移动设备也具有高延迟。

考虑到有关该主题的所有理论，我认为从统计角度来看，最佳方法应更实用，更不准确，并且基于实际连接速度和设备类型。

例如，我认为这是今天最好的方式：

1）将显示第一页/功能所需的所有内容放在用户的一个文件中，应该在100KB以下 - 这绝对是一项要求。

2）之后，拆分或分组文件的大小，以便延迟不再与下载时间一起显着。

为了简单和具体，如果我们假设：第一个字节的时间大约是200毫秒，每个文件的大小应该在~120KB到~200 KB之间，这对于今天的大多数连接来说是平均的。