你如何测试JavaScript代码？

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

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

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

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

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

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

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

你可以使用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最近在开发工具源选项卡中添加了行级别概要文件,让您可以准确了解每行执行的时间长度!

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

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

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

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