你如何测试JavaScript代码？

Question

CPU周期,内存使用,执行时间等？

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

Answer 1

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

我们"修复"了这个,不是通过切换到更快的组件,或者优化某些方法,而是先渲染数据,然后使用setTimeout渲染网格.因此,首先出现信息,然后网格会在一秒钟后出现.总的来说,这样做需要稍微多一点的处理时间,但对于用户来说,感知性能得到了提升.

这些天来,Chrome的探查和其他工具的普及和易于使用的,因为是console.time(),console.profile()和performance.now().Chrome还为您提供了一个时间线视图,可以显示杀死您的帧速率,用户可能在哪里等待的内容等.

查找所有这些工具的文档非常简单,您不需要SO答案.7年后,我仍然会重复我原来答案的建议,并指出你可以让代码慢速运行,用户不会注意到它,并且代码运行速度非常快,他们会抱怨相当快的代码不够快.或者您对服务器API的请求花了220毫秒.或者类似的东西.关键在于,如果你拿出一个分析器并去寻找工作,你会发现它,但它可能不是你的用户需要的工作.

Answer 2

我同意感知到的表现真的很重要.但有时我只是想知道做某事的方法更快.有时差异很大,值得了解.

你可以使用javascript计时器.但我通常得到使用原生的浏览器(目前还在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')

更新(2016年4月4日):

Chrome canary最近在开发工具源选项卡中添加了行级别概要文件,让您可以准确了解每行执行的时间长度!

Answer 3

我们总是可以通过简单的日期对象来测量任何函数所用的时间.

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

Answer 4

试试jsPerf.它是一个在线JavaScript性能工具,用于基准测试和比较代码片段.我用它所有的时间.

Answer 5

大多数浏览器现在正在实现高分辨率计时performance.now().它优于new Date()性能测试,因为它独立于系统时钟运行.

用法

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

参考

• https://developer.mozilla.org/en-US/docs/Web/API/Performance.now()
• http://www.w3.org/TR/hr-time/#dom-performance-now

Answer 6

JSLitmus是一个用于创建临时JavaScript基准测试的轻量级工具

让检查之间的性能function expression和function 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>

我上面做的是创建function expression并function constructor执行相同的操作.结果如下:

FireFox表现结果

IE性能结果

Answer 7

有些人建议使用特定的插件和/或浏览器.我不会,因为它们只对那个平台非常有用; Firefox上的测试运行不会准确转换为IE7.考虑到99.999999%的网站有多个浏览器访问它们,您需要检查所有流行平台的性能.

我的建议是将其保留在JS中.创建一个基准测试页面,其中包含所有JS测试并执行时间.您甚至可以将AJAX结果发回给您,以使其完全自动化.

然后冲洗并在不同的平台上重复.

Answer 8

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

JavaScript速度测试

您可以使用代码并在测试的浏览器中找出哪种技术更好.

Answer 9

我认为JavaScript性能(时间)测试已经足够了.我在这里找到了一篇非常方便的关于JavaScript性能测试的文章.

Answer 10

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

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

Answer 11

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

Answer 12

我正在寻找类似的东西，但发现了这个。

https://jsbench.me/

它允许进行并排比较，然后您还可以共享结果。

Answer 13

性能.mark（Chrome 87 ^）

performance.mark('initSelect - start');
initSelect();
performance.mark('initSelect - end');

Answer 14

黄金法则是在任何情况下都不要锁定您的用户浏览器。之后，我通常会查看执行时间，然后是内存使用情况（除非您正在做一些疯狂的事情，在这种情况下它可能具有更高的优先级）。