各大浏览器内置的开发工具，都提供了一个console对象。它主要有两个作用：显示网页代码运行时的错误信息。提供了一个命令行接口，用来与网页代码互动。下面我们就来详细研究下如何使用console进行性能测试。

　　对于前端开发人员，在开发过程中经常需要监控某些表达式或变量的值，如果使用用 debugger 会显得过于笨重，最常用的方法是会将值输出到控制台上方便调试。

　　最常用的语句就是console.log(expression)了。

　　从早前一道阿里实习生招聘笔试题目入手：

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function f1() { console.time('time span'); } function f2() { console.timeEnd('time span'); } setTimeout(f1, 100); setTimeout(f2, 200);   function waitForMs(n) { var now = Date.now(); while (Date.now() - now < n) { } } waitForMs(500);//time span: 0ms

　　我们先说说关于console的高级操作，最后在一起分析这道题目。

　　trace

　　console.trace()用来追踪函数的调用过程。

　　在大型项目尤其是框架开发中，函数的调用轨迹可以十分复杂，console.trace()方法可以将函数的被调用过程清楚地输出到控制台上。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function tracer(a) { console.trace(); return a; }   function foo(a) { return bar(a); }   function bar(a) { return tracer(a); }   var a = foo('tracer');

　　table

　　使用console将对象以表格呈现

　　可将传入的对象，或数组以表格形式输出，相比传统树形输出，这种输出方案更适合内部元素排列整齐的对象或数组，不然可能会出现很多的 undefined。

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var people = { flora: { name: 'floraLam', age: '12' }, john: { name: 'johnMa', age: '45' }, ray:{ name:'rayGuo', age:'22' } };   console.table(people);

　　火狐的控制台：

　　time timeEnd

　　计算程序的执行时间

　　可以将成对的console.time()和console.timeEnd()之间代码的运行时间输出到控制台上

　　?

1 2 3 4 5 console.time('计时器'); for (var i = 0; i < 1000; i++) { for (var j = 0; j < 1000; j++) {} } console.timeEnd('计时器');

　　以上代码计算console.time('计时器');和console.timeEnd('计时器');之间的代码块所需要的事件。

　　profile

　　使用console测试程序性能

　　开发中，我们常常要评估段代码或是某个函数的性能。在函数中手动打印时间固然可以，但显得不够灵活而且有误差。借助控制台以及console.profile()方法我们可以很方便地监控运行性能。

　　?

1 2 3 4 5 6 7 8 9 10 11 function parent() { for (var i = 0; i < 10000; i++) { childA() } } function childA(j) { for (var i = 0; i < j; i++) {} } console.profile('性能分析'); parent(); console.profileEnd();

　　上述代码计算console.profile('性能分析');和console.profileEnd();之间，代码块中涉及的函数的运行效率。

　　现在说回笔试题目

　　题目考察应聘者对console.time的了解和js单线程的理解。

　　console.time()语句和console.timeEnd()语句是用来对程序的执行进行计时的。

　　setTimeout()接受两个参数，第一个是回调函数，第二个是推迟执行的毫秒数。setTimeout()只是将事件插入了"任务队列"，必须等到当前代码(执行栈)执行完，主线程才会去执行它指定的回调函数。

　　因为f1和f2被都setTimeout事先设置的定时器装到一个事件队列里面。本来 f1应该在100ms后就要执行了，但是因为waitForMs占用了线程，而执行JavaScript是单线程的，所以就没办法在100ms后执行那个 f1，所以需要等500ms等waitForMs执行完，然后在执行f1和f2，这时候f1和f2就几乎同时执行了。

　　以上所述就是本文的全部内容了，希望大家能够喜欢。