如何缓存我的JavaScript文件以提高性能

Question

以下是我的页眉：

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script> 
<script type="text/javascript" src="js/jdpicker/jquery.jdpicker.js"></script> 
<script type="text/javascript" src="js/uniform/jquery.uniform.min.js"></script> 
<script type="text/javascript" src="js/jquery.hotkeys.js"></script> 
<script type="text/javascript" src="js/visualize/visualize.jQuery.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script> 
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
<script type="text/javascript" src="js/jwysiwyg/jquery.wysiwyg.js"></script> 

所有这些都必须被加载，它使我的网站变得缓慢，我该如何缓存它们以使加载时间更快？

- Tahoe Cale

Answer 1

你的JavaScript文件很大！以下是我的一些建议（请不要生气，因为我相信你已经采取了这些步骤）：

• 确保页面上需要使用的js文件都必要。你是否在使用fancybox？是否在使用cookie.js？如果有任何可以从列表中移除的js文件，请移除它们。
• 这些js文件中是否有任何可以通过CDN获取的？jQuery和jQuery UI都可以。这将减轻服务器的负担，并且许多用户可能已经在他们的计算机中缓存了这些js库的版本！
• 是否有更轻量级的库可以替换？如果有，就替换掉它们！
• 对于本地托管的文件，请进行压缩和混淆。如果你正在使用Visual Studio，则可以使用Chirpy或Combres。如果你没有使用Visual Studio，则还有很多其他实用工具可帮助你减小CSS和JS资源的大小。
• 考虑使用Less for CSS and CoffeeScript for JS。它们可以加速开发周期并预优化你的代码（如果你够幸运）。
• 现在，你已经有了一个大的混淆、压缩和优化过的JS文件，可以对它进行缓存。这一步是与平台相关的，因此你可能需要去搜索相关问题。

我是否遗漏了重要的内容？这些是我采取的快速步骤。我想是这样的。

- Evan Nagle

Answer 2

我建议将所有这些文件进行压缩和合并，变成一个文件 - 减少HTTP请求 = 更快的加载时间。

- Leon

---

然后，在第二次访问网站时，当我更改应用程序代码时，我的用户需要重新下载jquery。 - Stefan Kendall

当然，他仍然可以将其分成3个文件，即jquery / jquery-ui / 自己的代码，但请注意，在大多数情况下，仅打开新的HTTP连接所需时间比重新下载整个文件要长。此外，这也取决于您更改生产应用程序代码的频率... - Leon

或者更好的方法是使用CDN jQuery，并从其他网站获取缓存命中。我最近刚刚测试过，脚本下载到应用程序启动时间平均只快了约10毫秒（~1420ms vs 1430ms），而合并文件随着时间的推移失去了所有一致的缓存命中希望。 - Stefan Kendall

Answer 3

请参见此处有关If-Match和If-Modified-Since的信息。

IIS将为其返回的任何静态内容提供标记和最后修改标头，这意味着浏览器默认情况下将自动缓存js文件等静态资源。浏览器将尝试在每个页面加载时获取所有这些文件，但是IIS将返回304，并且浏览器将使用缓存版本。是的，与进行所有这些请求相关联的一些处理时间，但它不太可能对您的页面加载时间产生重大影响。 此外，在第一次页面加载时，这对您没有任何帮助，因为无论如何都必须下载这些文件。

比较第一次、第二次和第三次的加载时间。您可以在Firebug中轻松检查它们。如果它们之间没有太大的区别，则问题很可能不是js文件的下载大小，而是执行的js代码的复杂性（假设HTML加载足够快）。

减少全局初始化程序（即仅在1个页面上使用但在站点的所有页面上执行的代码）。将代码从内联脚本标签移出并放入窗口加载事件中。如果正确执行，这可能会有所帮助。

- Ilia G

Answer 4

我喜欢Minify。

它不仅可以缓存用户本地机器上的文件，而且很容易设置。一个提示：不要尝试在压缩后的代码上进行开发/调试！保留一个调试副本。

这是他们首页的一段简介，看看是否符合您的需求：

[Minify]将多个CSS或Javascript文件组合在一起，删除不必要的空格和注释，并使用gzip编码和最佳客户端缓存标头提供服务。

- The Maniac