我可以使用哪些基于浏览器的工具来检查我的JavaScript代码的效率和内存使用情况？

Question

我目前正在阅读Nicholas C. Zakas撰写的高性能JavaScript ，他在书中写道：

  

比较两段代码表明使用Selectors API是   浏览器的速度提高2到6倍（图3-6）。

我正在寻找的是一个基于浏览器的工具，它可以让我捕获并测量给定JavaScript片段的性能，并将其与使用不同方法的另一个脚本进行比较（例如，使用Selector API vs getElementsByTagName）。

我使用过Chrome和Firebug，但他们似乎都没有真正给我这种比较。我是否错误地使用这些工具，或者是否有一种我不熟悉的新工具？

Answer 1

Chrome开发者工具是您的最佳选择。有三个很棒的功能。

1. 时间轴。这将显示时间线图上任何正在执行的javascript的渲染时间。
2. 堆快照。这个人会拍摄你当前的JS的快照，包括你所有的链。它还显示了每个元素占用的内存量 - 提供了一种查找代码咀嚼位置的好方法。
3. CPU配置文件。显示函数占用的CPU使用量，对于查找要优化的位置以及可能引入Web工作者也很有用。

如果您使用Chrome测试版频道，请查看Speed Tracer扩展程序（由Google提供）。它基本上是一个增强的时间表。如果你是一个jQuery人，测试版也有CSS Selector Profiling。我还没有用，所以我不能说它的用途。

Answer 2

最流行的方法是使用http://jsperf.com/的免费在线服务。

或者来自github的clone it。

它比手动测试有一个很大的优势：它使用Java Applet来访问纳秒计时器，而JS计时器（Date对象）只能解析为毫秒。