测量Javascript应用程序的CPU负载

Question

我需要测量其他Javascript事件绑定的性能开销（使用jQuery live），开销可能会增加CPU负载，并且很难从执行时间分析中注意到。

如何衡量两个不同版本的Javascript应用程序之间的CPU负载差异？

Answer 1

分析的另一个选择是dynaTrace Ajax edition。 Resig有一个quick overview of it here。它特定于IE（但是...在大多数情况下性能最差的那个......）

看一看，这里的所有建议都很棒，如果您正在查看IE问题（某些内部网应用程序被锁定），那么dynaTrace是一个优秀且仍然免费工具。< / p>

Answer 2

Chrome开发工具非常棒，但由于Chrome不是浏览器，因此您不得不担心JS的性能，并且它会对事情进行大量优化，因此找不到其他浏览器的瓶颈也无济于事。 IE 8 has dev tools允许您进行分析，因此除了通常的Firebug分析器之外，您可能会发现它很有用。

但是关于你的情况，让我说只是绑定一个事件不会导致很多CPU负载，更多的内存问题，但你不应该担心，除非你做一些不寻常的事情你的页面。

此外，如果您特别关注jQuery.live函数，请让我快速解释它是如何工作的： 假设你做$('#linksWrap a').live('click', fn);

• 这会创建一个且只有一个事件处理程序，并将其附加到#linkswrap。
• 当您点击其中一个链接时，点击事件会冒出DOM树，最终到达#linkswrap。
• jQuery.live检测它实际来自哪个链接。此信息位于浏览器Event对象中。
• jQuery.live在被点击的链接的上下文中应用fn

如你所见，它实际上非常有效。浏览器只附加一个事件，因此内存使用率很低，而且不需要经常检查新元素，它会以一种很酷的方式使用事件冒泡。

事实上有人可能会争辩说，如果你将数千个事件附加到一个页面，假设你使用好的选择器，.live方法可能会更有效。 （例如.something .foo .bar.baz需要大量遍历和冒泡，但#parentOfTheLinks a.links会很快）

Answer 3

我认为这种测量方法非常具体。如果您对此感到满意，请查看Chrome浏览器中的内置开发人员工具。可以选择记录性能并在以后比较结果。这是Getting Started guide（请查看底部的分析和优化视频）。

Answer 4

除了@Ivan关于Chrome Dev Tools的回答之外，我还建议您查看Chrome的Google Speed Tracer扩展程序。

Answer 5

对于比较CPU负载的非科学但快速的方法，您可以启动Chrome的任务管理器，并在不同的选项卡/窗口中打开这两个版本。如果您正在进行优化，它将无法帮助您，但它可以一目了然地告诉您新版本是否占用较少的CPU。