使用console进行性能测试

 更新时间:2015年04月27日 10:23:11   投稿:hebedich  
各大浏览器内置的开发工具,都提供了一个console对象。它主要有两个作用:显示网页代码运行时的错误信息。提供了一个命令行接口,用来与网页代码互动。下面我们就来详细研究下如何使用console进行性能测试。

对于前端开发人员,在开发过程中经常需要监控某些表达式或变量的值,如果使用用 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就几乎同时执行了。

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

相关文章

  • js性能优化 如何更快速加载你的JavaScript页面

    js性能优化 如何更快速加载你的JavaScript页面

    JavaScript现在极其重要。一些网站使用JavaScript来增添魅力;如今的许多Web应用程序依赖它;其中一些甚至是完全用JavaScript编写而成的。我在本文中将指出一些重要的规则,介绍如何使用你的JavaScript、使用哪些工具以及你将从中得到什么好处
    2012-03-03
  • vscode中使用npm安装babel的方法

    vscode中使用npm安装babel的方法

    bable是一个广泛使用的ES6转换器,可以将ES6代码转为ES5代码,本文给大家介绍VScode里面怎么使用bable,使用npm安装babel的方法,需要的朋友参考下吧
    2021-08-08
  • JavaScript数字数组的13个实用小技巧

    JavaScript数字数组的13个实用小技巧

    数组是JS最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮助咱们提高开发效率,这篇文章主要给大家分享介绍了关于JavaScript数字数组的13个实用小技巧,需要的朋友可以参考下
    2023-11-11
  • bootstrap fileinput完整实例分享

    bootstrap fileinput完整实例分享

    这篇文章主要为大家分享文件上传组件bootstrap fileinput完整实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JSON 基本使用教程

    JSON 基本使用教程

    JSON是一种轻量级(Light-Meight)、基于文本的(Text-Based)、可读的(Human-Readable)格式,这篇文章主要介绍了JSON 基本使用教程,需要的朋友可以参考下
    2023-02-02
  • js滑动提示效果代码分享

    js滑动提示效果代码分享

    这篇文章主要为大家分享了js滑动提示效果代码,实现方法简单,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • redux-saga 初识和使用

    redux-saga 初识和使用

    这篇文章主要介绍了redux-saga 初识和使,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Javascript无参数和有参数类继承问题解决方法

    Javascript无参数和有参数类继承问题解决方法

    这篇文章主要介绍了Javascript无参数和有参数类继承问题解决方法,本文讲解了无参数类继承的问题和有参类继承的问题,并给出了解决方案,需要的朋友可以参考下
    2015-03-03
  • JavaScript实现烟花绽放动画效果

    JavaScript实现烟花绽放动画效果

    这篇文章主要介绍了JavaScript如何实现烟花绽放动画效果,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-08-08
  • zTree插件之多选下拉菜单实例代码

    zTree插件之多选下拉菜单实例代码

    zTree插件之多选下拉菜单实例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11

最新评论