it-swarm.cn

如何降低加载大型JS库的成本?

如果我在页面上使用大型Javascript库,我该如何确保这不会影响用户对网站的使用?

23
Macha

你可以做4件事。

  1. 缩小您的JS文件。这将删除所有注释和空白以减小其大小。
  2. 在每个页面上组合您的JS文件,以便只有1个文件。
  3. 发送文件时使用包来gzip文件。这将使它们更小
  4. 在页面底部放置不需要的Javascript,以便在最后加载。这将允许用户甚至在JS完全加载之前查看和使用页面。

还有一些人建议:

  • Apache将自动处理压缩(以及压缩内容的缓存),从而大大简化了文件管理
  • 使JavaScript正确缓存将产生很大的好处。
  • 通配符域(具有多个URI)将允许更多并发连接。预取不仅适用于图像/
25
Ben Hoffman

如果您使用的是通用库(例如jQuery,Prototype或Dojo),您可以将文件卸载到Google并让它们 提供它 ,这样就可以了几个优点:

  • 你不必担心缩小和拉链等
  • 这不是你的带宽
  • 这些文件来自不同的域,因此您可以(至少部分地)解决每个主机名的2个并行请求的 限制
  • 如果幸运的话,用户已经访问了同一个提供商使用相同库的其他站点,因此他们已经在浏览器缓存中使用了它。

注意:您要求的版本会对缓存特性产生很大影响:要求jQuery 1.4.2将为您提供一个可以缓存一年的文件,但1.4只能缓存一小时。

21
Cebjyre

您可以将整个库放入一个js文件并压缩文件。但是,它真的只对第一次加载页面很重要。在此之后,您的js文件将缓存在浏览器中,特别是如果您将缓存到期时间设置得足够长。因此任何连续命中都不会再加载你的js文件。

6
txwikinger

除了上面的答案,你可以使用 谷歌闭包编译器 自动压缩和优化你的JS,同时与其他第三方库(jQuery,YUI,mootools等)集成

4
theycallmemorty

如果您有多个页面元素并可以访问单独的域,则可以考虑在第二个域上托管所有静态文件,包括大型JS文件。

正如Steve Souders在他的高性能网站博客中所说的那样 -

...在某些情况下,将一堆资源下载到一个域并将它们分割到多个域是值得的。我把这个域称为分片。这样做可以并行下载更多资源,从而减少整个页面加载时间。

他写的其他地方..

浏览器为每个域打开有限数量的连接...跨两个域(而不是一个域)拆分或分片请求会导致页面更快,特别是在IE 6和7中

0
mvark