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

#1 楼

您可以执行4种操作。


最小化JS文件。这样会删除所有注释和空格,以减小其大小。
在每一页上合并您的JS文件,以便只有一个文件。
在发送文件时,请使用打包文件gzip。这将使它们变得更小
将不需要的Javascript放置在页面底部,以便在末尾加载。这样,即使在JS完全加载之前,用户也可以查看和使用该页面。

其他一些人建议:


Apache将自动处理
压缩(和缓存
压缩后的内容),大大简化了文件管理。
使JavaScript适当地可缓存
将带来巨大的好处。
通配符域(具有多个URI)
将允许更多并发连接。预取不仅仅是图像的
/


评论


您可以做更多的事情,还有更好的方法。 Apache将自动处理压缩(和缓存压缩内容),从而极大地简化了filse的管理。使javascript正确可缓存将带来巨大的好处。通配符域(具有多个URI)将允许更多并发连接。预取不仅适用于图片/

–symcbean
2010年7月19日在8:36

#2 楼

如果您使用的是通用库(例如jQuery,Prototype或Dojo),则可以将文件卸载到Google并由它们提供服务,这给您带来了许多好处:


您不会不必担心压缩和压缩等问题
这不是您的带宽
这些文件来自不同的域,因此您可以(至少部分地)解决每个主机名最多2个并行请求的限制

如果幸运的话,该用户已经访问了使用同一提供商提供的相同库的其他站点,因此他们已经将其存储在浏览器缓存中。

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

评论


CDN + 1,和scriptsrc.net使其更容易;)

–前
2010年7月15日在17:12

您可以扩展“注释”吗?为什么缓存时间有所不同?

–thecallmemorty
2010年7月15日在19:49

@theycallmemorty:虽然我没有检查文档,但我认为这是因为指定1.4.2可以非常明确地说明所需的版本,而要求1.4则基本上是在说“给我最多1.4“以下的最新版本,因此他们没有将其大量缓存。

–扎夫-本·杜吉德
2010年7月15日在22:50

另外值得注意的是,Microsoft在其CDN上提供了一些JS库(jQuery和某些MS特定的库),它们也支持https(许多其他脚本CDN不支持)asp.net/ajaxlibrary/cdn.ashx

–伯特羊肉
2010年7月19日在14:03

#3 楼

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

评论


+1表示您可以将整个库放在一个文件中并进行压缩。没想到。

–戈登·古斯塔夫森(Gordon Gustafson)
2010年7月31日在2:17

#4 楼

除了上述答案外,您还可以使用Google Closure Compiler自动压缩和优化JS,同时与其他第三方库(jQuery,YUI,mootools等)集成。

#5 楼

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

如Steve Souders在其“高性能网站”博客中所述-


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



在其他地方写。.


浏览器在每个域中打开有限数量的
连接...在两个
域中拆分或拆分请求,相对于一个域,
导致页面更快,特别是IE 6和7中的