Javascript脚本组合和缓存答案

【问题标题】：Javascript Script Combining and CachingJavascript脚本组合和缓存
【发布时间】：2010-03-09 18:42:48
【问题描述】：

我正在构建一个 AJAX 密集型 Web 应用程序（使用 ASP.NET、JQuery 和 WCF Web 服务），并且正在考虑构建一个 HTTP 处理程序来处理我的 JavaScript 文件和我的 CSS 文件的脚本组合和压缩。我知道不合并脚本通常是一种不太受欢迎的方法，我相信这可能是我最终会采用的方式，但我的问题是......

由于我的许多 JS 文件是由于我使用的控件造成的，所以它们在第一次加载后不会被浏览器缓存吗？由于可以在我的 Web 应用程序的许多页面上找到如此多的这些控件，实际上组合我的所有脚本并提供一个文件（每个页面都会有所不同）或提供将获得的单个文件实际上更快缓存？我想我得到的是，通过启用脚本组合，我现在是否会失去浏览器的部分缓存能力？我知道我可以缓存组合脚本，但是每个页面的组合脚本会有所不同，而对于单独的控制脚本，每个控制脚本都将被缓存，并且每个页面调用的新脚本数量将最少。

这有意义吗？想法？

【问题讨论】：

标签： asp.net javascript jquery gzip httphandler

【解决方案1】：

您提供的 JS 文件数量越少，您的页面就越快，因为到服务器的往返次数越少。我会手动将所有常见的 js 代码放入一个文件（或尽可能少的文件），将所有 css 代码放入一个文件等，而不用担心使用处理程序来组合文件。处理程序将花费处理时间来合并文件，因此您也将支付该罚款。您可以在 IIS 上打开 gzip 压缩并让它为您处理。我会在生产中使用的 Javascript 文件上运行类似 YUI Compressor 的东西。

如果处理程序在页面之间更改文件内容，浏览器将无法缓存它。如果您使用 SSL，这一点将毫无意义，因为浏览器无论如何都不会缓存文件。

编辑我已经更正了一些浏览器（如 FF）可以缓存 SSL 内容，但不是全部。

【讨论】：

有趣，我没有意识到 SSL 在所有这些中都发挥了作用。 Web 应用程序使用 SSL，并且需要加载大量 JS 文件。我需要将文件分开（至少对于开发而言）以保持代码分离和可伸缩性。我可以让 Visual Studio 在编译时处理一些组合，但我真的不介意处理 HttpHandler 的惩罚成本，因为我认为它不会成为性能问题。
另外，我相信 Firefox 3+ 现在可以缓存来自 SSL URL 的 CSS 和 JS 文件。

【解决方案2】：

正如其他提到的：在您拥有的一个静态 JS 文件和一个静态 CSS 文件上缩小、gzip 并打开缓存（设置过期时间并确保您支持 etags）。最重要的是，建议尽可能早地加载您的 CSS 文件和尽可能晚地加载您的 JS 文件（JS 文件加载会阻止其他下载，如果浏览器尽快获取 CSS，它会更快地呈现页面)。如果您有许多小图像/图标，精灵也会有所帮助。从子域加载静态内容将有助于浏览器同时下载更多内容，您可以删除这些子域的所有 cookie 以减小 http 标头大小。
您可以咨询YSlow 进行性能分析，这是一个很棒的工具！

【讨论】：

【解决方案3】：

通常不太受欢迎

它是用于实时 js 的吗？我想到了 JavaScriptMVC，它在为生产而不是开发而编译时将所有代码压缩到一个文件中……我相信这是一个沉重的负担。

【讨论】：

【解决方案4】：

通常最好将所有脚本结合起来。在这种情况下，您将减少 http 开销。缩小的控制脚本通常很小。在极少数情况下，当您使用相当大的控件时，您无法将其组合到主 js。

【讨论】：