2009-09-29 49 views
3

在所有“加快您的网站”网站和书籍,他们总是告诉我们尽可能不惜一切代价尽量减少HTTP请求。这很好,但是如果这意味着在每个页面上都必须重新加载120kb,因为用户缓存是空的,那么该怎么办?使用缓存文件或多一个HTTP请求?

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

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

  1. jQuery的,jQuery UI的,ThickBox的,LavaLamp的菜单=>在一个文件中一起精缩= 300KB
  2. jquery的,jQuery的用户界面,周期插件=>一起在一个文件=> 200KB
  3. jquery的,jQuery的用户界面,拱廊插件精缩=>在一个文件=> 250KB

而现在一起精缩OTH呃可能性总是具有2 HTTP请求:一个文件,包括jQuery和jQuery用户界面=> 150KB的,让我们把它叫做 “jui.js” 现在

  1. jui.js,ThickBox的,LavaLamp的再次= 300KB在开始的时候,但现在jui.js被缓存了另外两页
  2. (jui.js现在被缓存,所以没有加载),只循环插件=>只有50kb加载但多一个HTTP请求,因为我加载jui.js和循环插件分开。
  3. (jui.js已经缓存)中,仅负载拱廊插件=>仅100KB更加载但再次,其中一个请求已经在该点或KB大小缓存

SO 2个的HTTP请求是它确定在正常的“响应”Web服务器上有另一个HTTP请求?

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

(我希望我自己清楚:)我会尽快投达人,因为我有一些点!)

编辑:

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

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

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

感谢您的好评!

回答

1

这是大的复杂的课题。他们写关于这个问题的整本书;)

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

但是,使用JavaScript,浏览器在呈现页面之前首先下载JS(如果脚本标记在头部分中),那么如果您添加延迟属性或包含在底部页面,并用body = onload触发你的javascript。

请记住,您可以在资源上设置缓存标题,以便浏览器将它们缓存在内存或磁盘中。这在很多情况下都有很大的不同。

真的没有硬性规定,只是一些指导原则。你最好的选择是测试!宽带上拨号的效果不佳。

Fiddler是一个很好的程序,它会告诉你你的加载时间,例如,如果你在调制解调器上。

+0

我在页面底部有javscript,不管是否有一个或两个文件。 我真的不再在拨号上测试了,我也拒绝剔除IE6浏览器的调整。我在这:) :) 感谢您的提琴手提示! – Tschef 2009-09-29 23:01:41

1

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

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

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

+0

我一直希望有一个经验法则,一般来说你可以使用。 而我通常不喜欢从谷歌抓取所有东西,但这是个人的东西:) – Tschef 2009-09-29 22:59:16

+0

没有一个:)测试是你最好的朋友。简单地在测试之后,我有不同场景的网站。 – Mohammad 2009-09-29 23:02:25

+0

测试是我想要避免不惜一切代价在每个网络服务器上安装我的软件的朋友。所以它其实只是我应该优化谁的猜测。宽带或“慢”乐队?生活充满了选择:) – Tschef 2009-09-29 23:12:45

1

你真的有根据自己的流量做你自己的分析。初始加载时间也很重要,所以如果用户使用一个JS登陆页面,可能需要将其分开。但是,如果用户最终在您的网站上点击了一下,则一次加载全部内容的好处显而易见。这就是说,我的用户登陆需要更多脚本的“内容”,所以我通常倾向于尽量减少用户点击的假设。

我会离开的说法有关链接到你的脚本谷歌的副本链接到前面的讨论:

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

+0

感谢您的链接。 所以实际上你说你更喜欢我的选项2与1缓存的文件? – Tschef 2009-09-29 23:04:54

1

我想你如何处理这种情况很大程度上取决于你的网站获得的流量类型。如果这是一个只有几页(少于3页)的网站,那么你可以更宽松地分割文件,假设你只给用户最少的内容。但是,如果您的网站获得了查看大量网页的用户,那么只需将其大部分进行捆绑并发送一次即可。

此外,在将JavaScript放入JavaScript包之前,请看看JavaScript正在使用的位置。如果仅使用一个或两个不频繁访问的页面,则可以将其作为单独的文件。

实际上,由于您在发送脚本时会对脚本进行gzip(您的做法是正确的?),因此避免了额外的往返时间,因此通常会更快地添加脚本。就像Byron提到的那样,下载JavaScript会阻止所有其他的东西从被加载(除非它是异步完成的),所以你想尽量减少这个时间。

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

+0

我编辑我的帖子上面也许澄清,谢谢你的回答。 – Tschef 2009-09-30 09:18:40