如何减少加载大型JS库的成本？

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

您可以执行4件事。

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

还有一些其他人建议：

• Apache将自动处理压缩（和缓存压缩内容），从而大大简化了文件管理
• 使JavaScript适当地可缓存将产生巨大的好处。
• 通配符域（具有多个URI）将允许更多并发连接。预取不仅适用于图片/

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

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

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

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

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

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

正如Steve Souders在其“高性能网站”博客中指出的那样 -

...在某些情况下，值得将一堆正在单个域上下载的资源用于多个域。我称此为域分片。这样做可以并行下载更多资源，从而减少了总的页面加载时间。

他写的其他地方..

浏览器在每个域中打开有限数量的连接...在两个域（而不是一个域）之间进行拆分或分片，可以更快地显示页面，尤其是在IE 6和7中