你如何testingJavaScript代码的性能?

CPU周期,内存使用情况,执行时间等?

补充:除了只知道代码运行速度之外,是否还有一种在JavaScript中testing性能的定量方法?

分析器绝对是获取数字的好方法,但根据我的经验,感知性能对用户/客户端来说是重要的。 例如,我们有一个带有Ext手风琴的项目,它扩展了一些数据,然后是一些嵌套的Ext网格。 所有的东西实际上渲染速度都很快,没有一个单独的操作花了很长时间,只是一次渲染了很多信息,所以用户感觉很慢。

我们“固定”了这一点,而不是通过切换到更快的组件,或者优化一些方法,而是先渲染数据,然后用setTimeout渲染网格。 所以,信息首先出现,然后网格会在第二秒后popup。 总的来说,这样做需要稍微多一点的处理时间,但是对于用户来说,感知的性能得到了改善。


编辑:这个答案现在是7岁。 现在,Chrome分析器和其他工具与console.time()console.profile()performance.now()一样都是普遍可用且易于使用的。 Chrome还提供了一个时间线视图,可以显示什么是杀死你的帧速率,用户可能在等待的地方等等。

find所有这些工具的文档是非常容易的,你不需要这样的答案。 7年后,我仍然重复我的原始答案的build议,并指出,你可以在用户不会注意到的情况下永远运行缓慢的代码,并且运行的代码非常快,他们会抱怨很快的代码不够快。 或者你的服务器API请求需要220ms。 或者其他类似的东西。 关键在于,如果你把一个分析器拿出来去找工作,你会发现它,但这可能不是你用户需要的工作。

我确实同意,感知的performance确实是最重要的。 但有时候我只是想知道哪种方法做得更快。 有时候差别很大,值得了解。

你可以使用JavaScript的计时器。 但我通常使用原生Chrome(现在也在Firefox和Safari中)获得更一致的结果。devTool方法console.time()console.timeEnd()

我如何使用它的例子:

 var iterations = 1000000; console.time('Function #1'); for(var i = 0; i < iterations; i++ ){ functionOne(); }; console.timeEnd('Function #1') console.time('Function #2'); for(var i = 0; i < iterations; i++ ){ functionTwo(); }; console.timeEnd('Function #2') 

结果看起来像这样

更新(4/4/2016):

铬金丝雀最近添加了线级分析开发工具来源选项卡,让你看到每一行执行多久! 在这里输入图像描述

我们总是可以用简单的date对象测量任何函数所花费的时间

 var start = +new Date(); // log start timestamp function1(); var end = +new Date(); // log end timestamp var diff = end - start; 

试试jsPerf 。 这是一个在线JavaScript性能工具,用于基准testing和比较代码片段。 我一直使用它。

JSLitmus是一个轻量级的工具,用于创build特定的JavaScript基准testing

考察function expressionfunction constructor之间的性能:

 <script src="JSLitmus.js"></script> <script> JSLitmus.test("new Function ... ", function() { return new Function("for(var i=0; i<100; i++) {}"); }); JSLitmus.test("function() ...", function() { return (function() { for(var i=0; i<100; i++) {} }); }); </script> 

我上面做的是创build一个function expressionfunction constructor执行相同的操作。 结果如下:

FireFox性能结果

FireFox性能结果

IE性能结果

IE性能结果

现在大多数浏览器正在执行performance.now()高分辨率时序。 对于性能testing而言,它优于new Date() ,因为它独立于系统时钟工作。

用法

 var start = performance.now(); // code being timed... var duration = performance.now() - start; 

参考

有些人build议特定的插件和/或浏览器。 我不会,因为他们只对那个平台有用。 Firefox上的testing运行不会准确地转换成IE7。 考虑到99.999999%的站点有多个浏览器访问它们, 你需要检查所有stream行平台上的性能。

我的build议是把这个留在JS中。 用你所有的JStesting和执行时间创build一个基准testing页面。 你甚至可以把AJAX的结果发回给你,使其完全自动化。

然后只是冲洗,并在不同的平台上重复。

我认为JavaScript性能(时间)testing已经足够了。 我在这里find了一个关于JavaScript性能testing的非常方便的文章。

我有一个小工具,可以在浏览器中快速运行小testing用例,并立即得到结果:

https://duzun.me/playground/js_speed

你可以玩代码,并找出哪种技术更好的testing浏览器。

你可以使用这个: http : //getfirebug.com/js.html 。 它有一个JavaScript的分析器。

这是一个简单的函数,显示传入函数的执行时间。

 var perf = function (testName, fn) { var startTime = new Date().getTime(); fn(); var endTime = new Date().getTime(); console.log(testName + ": " + (endTime - startTime) + "ms"); } 

我发现执行时间是最好的措施。

你可以在firebug中使用console.profile

快速回答

在jQuery上(更具体地说,在Sizzle上),我们使用这个 (在您的浏览器上签出master和open speed / index.html),然后使用benchmark.js 。 这用于性能testing库。

长答案

如果读者不知道基准testing,工作负载和性能分析器之间的差异,请先阅读spec.org的“自述文件第一部分”一节中的一些性能testing基础。 这是为了系统testing,但理解这些基础也将有助于JS性能testing。 一些亮点:

什么是基准?

基准是“测量或评估标准”(Webster's II Dictionary)。 计算机基准testing通常是一个计算机程序,执行一组严格定义的操作 – 一个工作负载 – 并返回某种forms的结果 – 度量标准 – 描述被testing的计算机是如何执行的。 计算机基准测量指标通常测量速度:工作负荷的完成速度; 或吞吐量:每单位时间完成多less工作量单位。 在多台计算机上运行相同的计算机基准testing可以进行比较。

我应该testing自己的应用程序吗?

理想情况下,最好的系统比较testing将是您自己的应用程序与自己的工作量。 不幸的是,对于使用自己的应用程序和您自己的工作负载的不同系统获得可靠的,可重复的和可比较的测量的广泛基础是不切实际的。 问题可能包括产生一个好的testing用例,保密问题,难以确保可比较的条件,时间,金钱或其他限制。

如果不是我自己的应用程序,那又怎样?

您可能希望考虑使用标准化的基准作为参考点。 理想情况下,标准化的基准testing是可移植的,并且可能已经在您感兴趣的平台上运行。但是,在考虑结果之前,您需要确保您了解应用程序/计算需求与基准测量。 基准是否与您运行的应用程序类似? 工作负载是否有类似的特征? 根据你对这些问题的回答,你可以开始看到基准如何接近你的现实。

注:标准化的基准可以作为参考点。 尽pipe如此,在进行供应商或产品select时,SPEC不会声称任何标准化的基准testing都可以取代您自己的实际应用。

性能testingJS

理想情况下,最好的性能testing将使用您自己的应用程序和您自己的工作负载来切换您需要testing的内容:不同的库,机器等

如果这是不可行的(通常不是)。 第一个重要步骤:定义您的工作量。 它应该反映你的应用程序的工作量。 在这个演讲中 ,维亚切斯拉夫·叶戈罗夫谈到了你应该避免的糟糕的工作量。

然后,您可以使用像benchmark.js这样的工具来协助您收集指标,通常是速度或吞吐量。 在Sizzle上,我们感兴趣的是比较修正或变化如何影响图书馆的系统性能。

如果某些事情真的很糟糕,那么下一步就是寻找瓶颈。

我如何find瓶颈? 剖析

什么是configurationJavaScript执行的最佳方式?

我通常只是testingJavaScript性能,脚本运行多长时间。 jQuery Lover给出了一个很好的文章链接来testingjavascript代码的性能 ,但是文章只显示了如何testing你的javascript代码运行的时间。 我还build议阅读一篇名为“ 改进jQuery代码的 5个技巧,同时处理大量数据集”的文章。

UX Profiler从用户angular度来解决这个问题。 它将一些用户操作(点击)引起的所有浏览器事件,networking活动等进行分组,并考虑到延迟,超时等所有方面。

黄金法则是在没有任何情况下locking您的用户浏览器。 之后,我通常会查看执行时间,然后是内存使用情况(除非您正在做一些疯狂的事情,在这种情况下,这可能是一个更高的优先级)。

这是为特定操作收集性能信息的好方法。

 start = new Date().getTime(); for (var n = 0; n < maxCount; n++) { /* perform the operation to be measured *// } elapsed = new Date().getTime() - start; assert(true,"Measured time: " + elapsed); 

这是一个可重复使用的时间performance类。 示例包含在代码中:

 /* Help track time lapse - tells you the time difference between each "check()" and since the "start()" */ var TimeCapture = function () { var start = new Date().getTime(); var last = start; var now = start; this.start = function () { start = new Date().getTime(); }; this.check = function (message) { now = (new Date().getTime()); console.log(message, 'START:', now - start, 'LAST:', now - last); last = now; }; }; //Example: var time = new TimeCapture(); //begin tracking time time.start(); //...do stuff time.check('say something here')//look at your console for output //..do more stuff time.check('say something else')//look at your console for output //..do more stuff time.check('say something else one more time')//look at your console for output 

这里是一个测量你的function性能的工具,而不用修改你的函数的代码。 性能米

 import { makeMeasurable } from 'performance-meter'; // the function counts factorial function fact(n) { if(n < 2) { return 1; } return n * fact(n - 1); } fact = makeMeasurable(fact); fact(4); // the output: // 0.0025ms // 24