2010-03-09 49 views
1

我建立一个AJAX密集型的Web应用程序(使用ASP.NET,jQuery和WCF Web服务),并期待到建立一个处理脚本组合和压缩我的JavaScript文件和我的CSS HTTP处理程序文件。我不知道相结合的脚本通常不太优选的方法,我敢肯定,它可能我会在最后走的方向,但我的问题是这样的......的Javascript脚本合并和缓存

因为很多我的JS文件是由于我使用的控件在第一次加载后不会被浏览器缓存?由于可以在我的Web应用程序的许多页面上找到许多这些控件,因此将所有脚本组合起来并为其提供一个文件(每个页面会有所不同)或为单个文件提供服务会更快缓存?我想我得到的是,通过启用脚本结合我现在失去了浏览器的缓存能力的一部分?我知道我可以缓存组合的脚本,但组合的脚本对于每个页面都会有所不同,但对于单独的控制脚本,每个页面调用都会缓存每个脚本,并且新脚本的数量也会最小。

这是否有意义?思考?

回答

1

你成为JS文件的数量越少,速度就越快的网页会,由于往返于服务器的数量较少。我会手动将所有常见的js代码放入一个文件(或尽可能少的文件),将所有css代码放入一个文件等,而不用担心使用处理程序来合并文件。处理程序将花费处理时间来合并文件,所以你也要支付这个惩罚。你可以打开IIS上的gzip压缩,并让它为你处理。我会在生产中使用的Javascript文件上运行诸如YUI Compressor之类的东西。

如果处理程序从网页更改文件内容页面,浏览器将无法进行缓存。如果你使用的是SSL,这一点将是没有意义的,因为浏览器不会缓存这些文件。

编辑 我已经改正了一些浏览器(如FF)可以缓存SSL内容而不是全部。

+0

有趣的是,我没有意识到SSL在所有这一切中扮演着重要的角色。 Web应用程序正在使用SSL,并且会有大量需要加载的JS文件。我需要保持文件分离(至少对于开发),以维护代码分离和可伸缩性。我可以让Visual Studio处理一些编译时的组合,但我真的不介意处理HttpHandler的惩罚代价,因为我没有看到它在性能方面成为问题。 – Chris 2010-03-09 19:01:11

+0

另外,我相信Firefox 3+现在可以缓存来自SSL URL的CSS和JS文件。 – Chris 2010-03-09 19:05:10

0

通常较不优选的

是活的js?我想到了JavaScriptMVC,它将所有的代码压缩到一个文件中,而不是编译时生成,而不是开发......我相信这是一个沉重的重量。

0

通常最好是所有脚本结合起来。在这种情况下,你会减少HTTP开销。精简的控制脚本通常很小。在极少数情况下,当你使用相当大的控制时,你无法将它与主要的js结合起来。

1

正如其他提到的:在一个静态的JS文件和一个静态的CSS文件中,minify,gzip和打开缓存(设置过期时间和支持etags)。在此之上,建议尽可能早地加载CSS文件,并尽可能晚地加载JS文件(JS文件加载阻止其他下载,并且如果浏览器尽快获得CSS,则浏览器渲染速度会更快)。如果你有很多小图片/图标,精灵也有帮助。从子域加载静态内容将有助于浏览器同时下载更多的内容,并且您可以删除所有这些子域的cookie以降低http头的大小。
你可以咨询YSlow进行性能分析,这是一个很棒的工具!