Javascript和CSS解析性能

我正在尝试提高Web应用程序的性能.我有可用于优化返回主HTML页面所用时间的指标,但我关注这些HTML页面中包含的外部CSS和JavaScript文件.它们通过HTTP Expires标头静态提供,但在应用程序的所有页面之间共享.

我担心浏览器必须为显示的每个页面解析这些CSS和JavaScript文件,因此将站点的所有CSS和JavaScript共享到公共文件中会对性能产生负面影响.我是否应该尝试拆分这些文件,以便从每个页面链接到该页面所需的CSS和JavaScript,或者我的努力收到的回报很少？

是否有任何工具可以帮助我为此生成指标？

上下文:虽然HTTP开销比解析JS和CSS更重要,但忽略解析对浏览器性能的影响(即使你的JS不到一兆)也是一个让自己陷入困境的好方法.

YSlow,Fiddler和Firebug不是监控解析速度的最佳工具.除非它们最近更新过,否则它们不会将通过HTTP获取JS或从缓存加载所需的时间与分析实际​​JS有效负载所花费的时间分开.

解析速度有点难以衡量,但我们已经在我所研究的项目中多次追踪这个指标,即使有大约500k的JS,对页面加载的影响仍然很大.显然,较旧的浏览器受到的影响最大......希望Chrome,TraceMonkey等可以帮助解决这种情况.

建议:根据您站点上的流量类型,分配JS有效负载可能是值得的,因此在最流行的页面上永远不会使用的一些大块JS从不发送到客户.当然,这意味着当一个新客户端点击需要这个JS的页面时,你必须通过网络发送它.

但是,由于您的流量模式,80%的用户从不需要50%的JS,因此可能会出现这种情况.如果是这样,那么您肯定只在需要JS的页面上使用较小的打包JS有效负载.否则,80%的用户将在每个页面加载中遭受不必要的JS解析惩罚.

结论:很难找到JS缓存和较小的打包有效负载的适当平衡,但是根据您的流量模式,除了将所有JS粉碎到每个页面加载之外,绝对值得考虑一种技术.