3

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

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

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

  1. jquery、jquery ui、thickbox、lavalamp menu => 一起缩小到一个文件中 = 300kb
  2. jquery，jquery ui，循环插件 => 一起缩小在一个文件中 => 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 文件（当然是缩小的），并将每个页面的动态部分包含在不同的（再次缩小）js 文件中。

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

感谢您的精彩回答！

4

4 回答 4

1

I think how you handle this situation heavily depends on the type of traffic your site gets. If it is a site where people are only hitting a few (less than 3) pages and leaving then you can split up files more liberally with the assumption that you are giving users only the minimum for what they need. However, if your site gets users who are viewing a lot of pages then just bundle most of it up and ship it over once.

Also, take a look at where the javascript is being used before putting it into the javascript package. If it is only used a page or two that aren't frequently visited then you can make it a separate file.

In practice, since you are gzipping your scripts when they are sent out (your doing that right?) then its often faster to just include scripts since you avoid the extra round-trip-time. Like Byron mentioned, downloading javascript blocks everything else from being loaded (unless its done asynchronously) so you want to do your best to minimize that time.

Start playing around with the Net tab in Firebug to see how performance is affected.

于 2009-09-30T01:32:41.653 回答
1

简而言之，这里没有经验法则。根据您的网络服务器设置，您可能想尝试通过将文件合并到一个更大的文件来进行优化...我知道 apache 可以配置为使用相同的连接来流式传输多个文件。最好的办法是使用 apache AB 之类的基准测试工具来简单地测试您的更改。

至于 jquery 的东西，你可以将你的脚本包含在一个公共域（如 google）中，以 1）避免连接 2）许多人已经将它们缓存在浏览器中。

即：http ://code.google.com/p/jqueryjs/

于 2009-09-29T22:46:47.127 回答
1

您确实必须根据自己的流量进行自己的分析。初始加载时间也很重要，所以如果用户登陆一个只有一个 JS 的页面，你可能想把它分开。但是，如果用户最终在您的网站上点击了一下，那么一次加载所有网站的净收益是显而易见的。

也就是说，我的用户登陆需要更多脚本的“内容”，所以我通常倾向于最小化我可以假设用户会点击的情况。

我将把关于链接到 google 的脚本副本的论点留给之前讨论的链接：

我应该链接到 Google API 的 JS 库云吗？

于 2009-09-29T22:48:17.340 回答
1

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

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

但是对于 javascript，浏览器会在呈现页面之前先下载 JS（如果脚本标记在 head 部分中），因此如果添加 defer 属性或包含在页面底部并触发，您会看到更好的性能你的 javascript 带有 body=onload。

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

真的没有硬性规定，只有一些指导方针。你最好的选择是测试！在拨号上效果更好的在宽带上效果不佳。

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

于 2009-09-29T22:50:26.153 回答