Javascript和CSS解析性能

我正在努力提高web应用程序的性能。我有一些指标可以用来优化返回主HTML页面所需的时间，但我担心这些HTML页面中包含的外部CSS和JavaScript文件。这些服务是静态的，带有HTTP Expires头，但在应用程序的所有页面之间共享

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

是否有任何工具可以帮助我生成这方面的指标？

---

我相信是的，但请注意，除非所有请求都通过环回连接，否则您不必担心。拆分文件的HTTP开销对性能的影响远大于解析，除非您的CSS/JS文件超过数兆字节。

上下文：虽然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粉碎到每个页面负载中之外，绝对值得考虑一种技术。

要补充kamen的好答案，我想说，在某些浏览器上，较大js资源的解析时间呈非线性增长。也就是说，一个1兆JS文件将需要更长的时间来解析两个500k文件。因此，如果你的很多流量都是那些可能缓存你的JS的人（返回访问者），并且你的所有JS文件都是缓存稳定的，那么即使你最终在每个页面视图上加载了所有JS文件，也可以将其分解。

重要的是要注意，IE对它将发出的请求有一个任意的上限。如果你有太多不同的JS文件，那么在某一点之后IE将不再加载你的脚本。这在Drupal项目中得到了证明，如果JS聚合关闭，页面将加载一半的脚本，但一旦我们打开JS聚合，它就可以正常工作。（JS聚合是Drupal的一项功能，它可以将一个页面的所有JS拉到一个文件中，以减少请求数量。另外，levik，您建议拆分文件的建议也很有效，因为一些浏览器几乎同时请求和解析两个文件。其他浏览器将等待第一个文件被解析后再加载第二个文件。我知道了我发现一般来说，请求越少越好，代码越简洁、越相关。