使用缓存文件还是一个HTTP请求?

时间:2009-09-29 22:42:15

标签: javascript http caching request minify

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

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

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

  1. jquery,jquery ui,thickbox,lavalamp menu =>一起缩小为一个文件= 300kb
  2. jquery,jquery ui,cycle plugin =>一起缩小在一个文件中=> 200KB
  3. jquery,jquery ui,galleria plugin =>一起缩小在一个文件中=> 250KB
  4. 现在是另一种可能性,总是有2个HTTP请求:一个文件由jquery和jquery组成ui => 150kb,现在叫它“jui.js”

    1. jui.js,thickbox,lavalamp =开头再次300kb,但现在jui.js被缓存为其他2页
    2. (现在缓存jui.js所以没有加载),只有循环插件=>只加载50kb,但加载了一个HTTP请求,因为我单独加载jui.js和循环插件。
    3. (jui.js已经缓存),只加载galleria plugin =>只加载100kb,但再加上2个HTTP请求,其中一个请求已经被缓存
    4. 那么,在正常的“响应式”Web服务器上,在哪个点或Kb大小可以有另一个HTTP请求?

      是否有人有任何最佳做法,或者只是“不惜一切代价最小化HTTP请求!”?

      (我希望自己清楚明白:)一旦我得到一些积分,我就会投票给人们!)

      修改

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

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

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

      感谢你们已经有了很棒的答案!

4 个答案:

答案 0 :(得分:1)

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

至于jquery的东西,你可以把你的脚本从一个公开的域名包括谷歌到1)避免连接2)很多人已经将它们缓存在浏览器中。

ie:http://code.google.com/p/jqueryjs/

答案 1 :(得分:1)

您必须根据自己的流量进行自己的分析。初始加载时间也很重要,因此如果用户登陆到具有单个JS的页面,您可能希望将其拆分。但是,如果用户最终在您的网站上点击一下,那么立即加载所有内容的净收益是显而易见的。

也就是说,我的用户登陆需要更多脚本的“内容”,因此我倾向于尽量减少用户会点击的假设。

我将把关于链接到谷歌脚本副本的论点留给以前讨论的链接:

Should I link to Google API's cloud for JS libraries?

答案 2 :(得分:1)

这是一个很复杂的主题。他们写了关于这个主题的全书;)

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

但是使用javascript,浏览器会在呈现页面之前先下载JS(如果脚本标记在head部分中),那么如果添加defer属性,或者包含在页面底部,您会看到更好的性能,并使用body = onload触发您的javascript。

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

确实没有严格的规则,只有一些指导方针。你最好的选择是测试!哪种方式比拨号更好,但在宽带上效果不佳。

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

答案 3 :(得分:1)

我认为您如何处理这种情况在很大程度上取决于您的网站获得的流量类型。如果它是一个人们只能访问少数(少于3个)页面然后离开的网站,那么你可以更自由地分割文件,并假设你只为用户提供他们需要的最小值。但是,如果您的网站吸引了正在查看大量网页的用户,那么只需捆绑大部分网页并将其发送一次。

另外,在将javascript放入javascript包之前,请先查看javascript的使用位置。如果仅使用一两页不经常访问的页面,则可以将其设为单独的文件。

实际上,由于你在发送脚本时正在对你的脚本进行gzipping(你这样做了吗?)然后通常更快地包含脚本,因为你避免了额外的往返时间。就像Byron提到的那样,下载javascript会阻止其他所有内容(除非它是异步完成的),所以你要尽力减少这段时间。

开始使用Firebug中的Net选项卡来查看性能如何受到影响。