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

2020-12-29 16:20:29

参考地址 使用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就几乎同时执行了。


  • 2018-03-20 22:01:18

    Java如何进行Base64的编码(Encode)与解码(Decode)?

    Base64是一种能将任意Binary资料用64种字元组合成字串的方法,而这个Binary资料和字串资料彼此之间是可以互相转换的,十分方便。在实际应用上,Base64除了能将Binary资料可视化之外,也常用来表示字串加密过后的内容。如果要使用Java 程式语言来实作Base64的编码与解码功能,可以参考本篇文章的作法。

  • 2018-03-20 23:38:05

    PHP中json_encode与json_decode

    json_encode() 对变量进行JSON编码,json_decode() 对JSON数据进行解码,转换为PHP变量

  • 2018-03-21 22:26:03

    Android BASE64Encoder不能用的问题

    昨天项目与后台交互的接口传参数需要加密,用的是BASE64Encoder加密,可是这个类不能用,谷歌了一下说的是:

  • 2018-03-21 22:28:02

    Java加密算法 AES

    AES 算法 对称加密,密码学中的高级加密标准 2005年成为有效标准

  • 2018-03-24 13:23:26

    Only the original thread that created a view hierarchy can touch its views

    很多网友在Android中使用多线程处理UI相关内容时可能会发现Logcat提示Only the original thread that created a view hierarchy can touch its views这样的错误,这主要是Android的相关View和控件不是线程安全的,我们必须做独立的处理这点比J2ME麻烦一些,这里Android给 我们提供了很多方法,有关线程的

  • 2018-03-26 18:05:09

    MYSQL OR与AND一起 的用法

    查询结果是id = 2且age = 20或者id=1SELECT * from student WHERE id = 1 or id = 2 AND age = 20;12

  • 2018-03-27 11:27:09

    Java中Set集合的使用

    Set类继承了Conllection类,是一种集合类。Set的实现类有三个,下面我们会一一来说这些的不一样。

  • 2018-03-27 11:36:58

    Java中数组、List、Set互相转换

    需要注意的是, Arrays.asList() 返回一个受指定数组决定的固定大小的列表。所以不能做 add 、 remove等操作,否则会报错。