javascript - 使用缓存文件或一个更多的 HTTP 请求？

Question

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

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

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

1. jquery、jquery ui、thickbox、lavalamp menu => 一起缩小到一个文件中 = 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 现在被缓存，所以没有加载)，只有循环插件 => 只有 50kb 加载，但是当我分别加载 jui.js 和循环插件时，还有一个 HTTP 请求。
3. (jui.js 已被缓存)，仅加载 galleria 插件 => 仅需加载 100kb，但同样是 2 个 HTTP 请求，其中一个请求已被缓存

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

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

(我希望我说清楚了:)一旦我有一些观点，我就会投票给人们!)

编辑:

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

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

因此，如果在大多数页面上我需要 100kb 的额外空间(动态部分)，我该如何测试缓存 HTTP 请求的时间？有没有数字，有人测试过这样的东西吗？

感谢您的精彩回答!

Answer 1

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

对于资源(javascript、css 等)，有时单独下载它们会更好。浏览器将并行下载它们。如果页面 a 需要资源 x y z 但页面 b 只需要 x 和 z，将它们分开是一件好事。其他时候，每个页面都需要的资源最好一次全部下载。这取决于。

但是对于 javascript，浏览器会在呈现页面之前先下载 JS(如果 script 标记位于 head 部分)，因此如果添加 defer 属性或包含在页面底部，您会看到更好的性能，并使用 body=onload 触发您的 javascript。

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

确实没有硬性规定，只有一些准则。你最好的选择是测试!在拨号上效果更好的方法在宽带上效果不佳。

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