使用缓存文件还是一个以上的 HTTP 请求？

在所有“加速你的网站”网站和书籍上，他们总是告诉我们不惜一切代价尽量减少 HTTP 请求。这很好，但如果这意味着在每个页面上你都必须一次又一次地重新加载 120kb，因为用户缓存是空的怎么办？

如果我在网站的每个页面上使用 5 个 js 文件，那么将它们放在一个文件中并在每个页面上加载此文件，而不是将它们与所有其他变量文件放在一个大文件中并保存一个 HTTP 请求不是更好吗？从哪个点或文件大小可以“缓存”文件并进行另一个 HTTP 请求？

我给你举了一个 3 页的例子，当我对每页一个 minifed JS 文件只使用一个 HTTP 请求时：

1. jquery、jquery ui、thickbox、lavalamp 菜单 => 一起压缩在一个文件中 = 300kb
2. jquery、jquery ui、cycle 插件 => 一起压缩在一个文件中 => 200kb
3. jquery、jquery ui、galleria 插件 => 一起压缩在一个文件中 => 250kb

现在另一种可能性总是有 2 个 HTTP 请求：一个包含 jquery 和 jquery ui => 150kb 的文件，我们暂时将其称为“jui.js”

1. jui.js、thickbox、lavalamp = 开头又是 300kb，但现在 jui.js 已缓存其他 2 个页面
2. （jui.js 现在已缓存，因此未加载），只有 Cycle 插件 => 仅加载 50kb，但当我分别加载 jui.js 和 Cycle 插件时，又会产生一个 HTTP 请求。
3. （jui.js 已缓存），仅加载 galleria 插件 => 仅加载 100kb，但又是 2 个 HTTP 请求，其中一个请求已缓存

那么在什么时候或 Kb 大小可以在正常的“响应式”Web 服务器上发出另一个 HTTP 请求呢？

有没有人有任何最佳实践，或者只是“不惜一切代价最小化 HTTP 请求！”？

（我希望我说清楚了：）一旦我有一些观点，我就会投票给人们！）

EDIT:

这基本上是一个更简单的问题： 缓存的 js 文件需要多长时间的额外 HTTP 往返？如果http请求比我需要在每个页面上下载额外的非缓存部分的时间慢，那么我会将所有内容放入每个页面上的1个大文件中（每个页面上1个不同的大文件）。

如果对缓存的 js 文件的 HTTP 请求几乎没有，那么我会将每个页面需要的部分拆分到一个额外的 js 文件中（当然是缩小的），并将每个页面的动态部分包含在不同的（再次缩小的）js 文件中。

因此，如果在大多数页面上我需要 100kb 的额外空间（动态部分），我该如何测试缓存的 HTTP 请求的时间？有没有任何数字，有人已经测试过类似的东西了吗？

感谢您的精彩回答！

这是一个大而复杂的主题。他们写了关于这个主题的整本书；）

对于资源（javascript、css 等），有时最好单独下载它们。浏览器将并行下载它们。如果a页面需要资源x y z，而b页面只需要x和z，那么将它们分开是一件好事。其他时候，每个页面都需要的资源可能最好一次性下载。这取决于。

但是使用 javascript，浏览器会在渲染页面之前先下载 JS（如果 script 标签位于 head 部分），因此如果添加 defer 属性，或者包含在页面底部并触发，您会看到更好的性能你的 javascript 带有 body=onload。

还要记住，您可以在资源上设置缓存标头，以便浏览器将它们缓存在内存或磁盘中。这在很多情况下都会产生巨大的差异。

实际上没有硬性规定，只有一些指导方针。最好的选择就是进行测试！与拨号相比效果更好的方法在宽带上效果不佳。

Fiddler 是一个很好的程序，例如，如果您使用调制解调器，它会向您显示加载时间。