测量 Javascript 应用程序的 CPU 负载答案

【问题标题】：Measure CPU load of Javascript applications测量 Javascript 应用程序的 CPU 负载
【发布时间】：2011-01-13 22:28:05
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

看一看，这里的所有建议都很棒，如果您正在查看 IE 问题（某些 Intranet 应用程序被锁定），那么 dynaTrace 是一款出色且仍然免费的工具。

【讨论】：

【解决方案2】：

Chrome 开发工具很棒，但由于 Chrome 不是浏览器，你不必担心 JS 性能，而且它优化了很多东西，它对寻找其他浏览器的瓶颈没有多大帮助。 IE 8 has dev tools 可以让您进行分析，因此除了通常的 Firebug 分析器之外，您可能会发现它很有用。

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

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

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

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

【讨论】：

【解决方案3】：

我认为这种测量将非常具体。如果你没问题，那么看看 Chrome 浏览器中的内置开发者工具。可以选择记录性能并稍后比较结果。这是Getting Started guide（看看底部的Profiling and Optimizing视频）。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：