使用console进行 性能测试 和 计算代码运行时间

发表于:2018-9-04 11:11

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:floralam    来源:博客园

分享:
  对于前端开发人员,在开发过程中经常需要监控某些表达式或变量的值,如果使用用 debugger 会显得过于笨重,最常用的方法是会将值输出到控制台上方便调试。
  最常用的语句就是console.log(expression)了。
  从早前一道阿里实习生招聘笔试题目入手:
  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()方法可以将函数的被调用过程清楚地输出到控制台上。
  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。
  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()之间代码的运行时间输出到控制台上
  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()方法我们可以很方便地监控运行性能。
  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就几乎同时执行了。

    上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号