原文:http://www.tuicool.com/articles/JrARVjv

对于前端开发人员,在开发过程中经常需要监控某些表达式或变量的值,如果使用用 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单线程的理解。

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

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

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

使用console进行 性能测试 和 计算代码运行时间的更多相关文章

  1. 使用console进行 性能测试 和 计算代码运行时间(转载)

    本文转载自: 使用console进行 性能测试 和 计算代码运行时间

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

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

  3. Objective-C 计算代码运行时间

    今天看到一篇关于iOS应用性能优化的文章,其中提到计算代码的运行时间,觉得非常有用,值得收藏.不过在模拟器和真机上是有差异的,以此方法观察程序运行状态,提高效率. 第一种:(最简单的NSDate) N ...

  4. php计算代码运行时间与内存使用的一段代码

    计算运行时间及内存使用,代码如下: <?php //开始计时 $HeaderTime = microtime(true);//参数true表示返回浮点数值 //代码 //... printf(& ...

  5. 使用Objective-C 计算代码运行时间

    第一种:(最简单的NSDate) NSDate* tmpStartData = [NSDate date]; //You code here... double deltaTime = [[NSDat ...

  6. C# 计算代码运行时间

    Stopwatch watch = new Stopwatch(); watch.Start(); int num = myhelper.MySQLExecuteNonQuery(comlist); ...

  7. python计算代码运行时间的装饰器

    import time def cal_time(func): def wrapper(*args, **kwargs): t1 = time.time() result = func(*args, ...

  8. C语言--计算代码段运行时间

    c语言中有专一包含计算时间函数的头文件,time.h.当我们需要计算某段程序运行的时间时就需要用到time.h包含的clock()函数,在这里介绍一下如何使用这个函数计算代码运行时间. clock函数 ...

  9. 计算Python代码运行时间长度方法

    在代码中有时要计算某部分代码运行时间,便于分析. import time start = time.clock() run_function() end = time.clock() print st ...

随机推荐

  1. 算法入门及其C++实现

    https://github.com/yuwei67/Play-with-Algorithms (nlogn)为最优排序算法 选择排序 整个数组中,先选出最小元素的位置,将该位置与当前的第一位交换:然 ...

  2. HDU5367 思维map // 动态线段树

    地主毛毛有n座山,这些山在地主家门前排成一条直线.这些山一开始均有相同的高度.  每一天,毛毛都会要求花花开挖机把几座山挖掉一定高度,或者给一些山堆上一些高度.并且要求花花报告现在有多少座山属于“高山 ...

  3. Golang的防坑小技巧

    Golang的防坑小技巧 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 作为一名小白,在之前没有接触到编程的小伙伴,难免会踩到一些坑,比如说刚刚入门的时候你需要安装环境,学习Gol ...

  4. mybatis中Parameter index out of range (1 > number of parameters, which is 0).

    Parameter index out of range (1 > number of parameters, which is 0).(参数索引超出范围) 在mybatis里面写就是应该是 l ...

  5. POJ - 1850 Code(组合数学)

    https://vjudge.net/problem/POJ-1850 题意 输出某字符串在字典中的位置.字符串不合规则时输出0. 分析 首先判断字符串合法性,也就是判断是不是升序排列的.如果符合,以 ...

  6. numpy笔记—np.sum中keepdims作用

    A = np.random.randn(4,3) B = np.sum(A, axis = 1, keepdims = True) 我们使用(keepdims = True)来确保 A.shape 是 ...

  7. HostAliases向Pod中添加hosts解析

    前言 根据公司同一个项目需要不同的de/te/pe环境,由于相应环境调用的数据库等配置信息存在不同等因素,需要向Kubernetes集群中的Pod添加对应的hosts解析. 解决 以下以yaml文件自 ...

  8. (cx_Oracle.DatabaseError) DPI-1047: 64-bit Oracle Client library cannot be loaded: "libclntsh.so: cannot open shared object file: No such file or directory"

    打开https://oracle.github.io/odpi/doc/installation.html 官方相关如下 Oracle Instant Client RPM¶ To run ODPI- ...

  9. Java之Jacob调用COM接口DLL-----------------------------------dm。dll

    用Java控制windows了,嗯,低层次按键模拟,可控制游戏,内存也不在话下. 一.环境介绍 1.myeclipse8.5 2.著名按键插件dm.dll  32bit.此插件实现COM接口,百度百科 ...

  10. QSS-qt样式表

    QSS即Qt StyleSheet(Qt样式表)的简称,是一种用来自定义控件外观的强大机制,QSS可以让我们的程序界面更加漂亮 每条QSS样式都由两部分组成:1. 选择器,该部分指定要美化的控件  2 ...