Web 优化：为什么组合文件更快？

Question

我读过将所有的 css 文件合并为一个大文件，或者将所有脚本文件合并为一个脚本文件可以减少 HTTP 请求的数量，从而加快下载速度。

但我不明白这一点。我认为如果您有多个文件（最多限制，我相信在现代浏览器上是 10 个），浏览器会并行下载它们，从而减少下载的总时间（除以允许的连接数）。

我显然在这里遗漏了一条关键信息。有人可以开灯吗？

Answer 1

每个请求/响应都有开销。基本上就是这样。

以下是向 Google 发送请求标头的示例...

GET http://www.google.com/ HTTP/1.1 接受：应用程序/x-ms-应用程序， 图像/jpeg、应用程序/xaml+xml、 图像/gif，图像/pjpeg， 应用程序/x-ms-xbap， 应用程序/vnd.ms-excel， 应用程序/vnd.ms-powerpoint， 应用程序/msword， 应用程序/x-shockwave-flash，/ 接受语言：en-US 用户代理： Mozilla/4.0（兼容；MSIE 7.0； 视窗 NT 6.1；哇64;三叉戟/4.0； GTB0.0； SLCC2; .NET CLR 2.0.50727； .NET CLR 3.5.30729； .NET CLR 3.0.30729；媒体中心PC 6.0； OfficeLiveConnector.1.4； OfficeLivePatch.1.3) 接受编码： gzip，放气连接：保持活动状态 主机：www.google.com Cookie： xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

我去年写了一篇关于这个的文章...... http://swortham.blogspot.com/2010/03/latency-requests-css-sprites-and-you.html

您是对的，可以并行下载多个文件（从单个主机名下载 2 个或多个文件，具体取决于浏览器）。这反过来会导致页面逐渐加载，这很好。但这并不意味着您的主页应该由 20+ 个 css、js 和图像文件组成。理想情况下，您需要结合相当多的资源来优化网站。

Answer 2

几件事：

• TCP 设置和拆除 - 随着 keep-alive 和流水线的广泛使用，这不再太重要了，除了一些代理出于兼容性原因回退到这种“一个 HTTP 请求 - 一个 TCP 连接”模型。
• HTTP 标头开销 - 这对于小文件可能很重要 - 数百字节的标头可能比响应正文大。
• 延迟（从请求开始到响应开始的时间）- 这在一定程度上通过 keepalive 和流水线减少
• 并行下载限制 - 这是主要限制。 IE6 曾经将这个限制为每个主机名 2 个连接，在 IE8 中它已被限制为 6 个（其他浏览器已经有一段时间了合理的限制）。请参阅 this older study 以进一步并行化（“使用 4 个域名而不是 1 个”）。