使用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) {
}//空while
}
waitForMs(500);//输出什么?
//->time span: 0ms
//实际测试输出的是 time span: 0.023ms
//实际的time是不确定的接近于0ms的,而不是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');
输出chrome:
console.trace()
tracer @ VM127:3
bar @ VM127:12
foo @ VM127:8
(anonymous function) @ VM127:15
InjectedScript._evaluateOn @ VM116:895
InjectedScript._evaluateAndWrap @ VM116:828
InjectedScript.evaluate @ VM116:694
table
使用console将对象以表格呈现
可将传入的对象,或数组以表格形式输出,相比传统树形输出,这种输出方案更适合内部元素排列整齐的对象或数组,不然可能会出现很多的 undefined。
var people = {
flora: {
name: 'floraLam',
age: '12'
},
john: {
name: 'johnMa',
age: '45'
},
ray:{
name:'rayGuo',
age:'22'
}
};
console.table(people);
(index) | name | age |
flora | "floraLam" | "12" |
john | "johnMa" | "45" |
ray | "rayGuo" | "22" |
time和timeEnd
计算程序的执行时间(成对出现)
可以将成对的console.time()和console.timeEnd()之间代码的运行时间输出到控制台上
console.time('计时器');
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {
//空
}
}
console.timeEnd('计时器');
//->计时器: 725.726ms
profile
使用console测试程序性能
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.time的了解和js单线程的理解。
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) {
}//空while
}
waitForMs(500);//->time span: 0ms
console.time()语句和console.timeEnd()语句是用来对程序的执行进行计时的。
setTimeout()接受两个参数,第一个是回调函数,第二个是推迟执行的毫秒数。setTimeout()只是将事件插入了"任务队列",必须等到当前代码(执行栈)执行完,主线程才会去执行它指定的回调函数。
因为f1和f2被都setTimeout事先设置的定时器装到一个事件队列里面。本来 f1应该在100ms后就要执行了,但是因为waitForMs占用了线程,而执行JavaScript是单线程的,所以就没办法在100ms后执行那个 f1,所以需要等500ms等waitForMs执行完,然后在执行f1和f2,这时候f1和f2就几乎同时执行了。
还有一种说法:setTimeout()的第二个参数告诉javascript再过多长时间把当前任务添加到队列中。
使用console进行性能测试和计算代码运行时间的更多相关文章
- 使用console进行 性能测试 和 计算代码运行时间(转载)
本文转载自: 使用console进行 性能测试 和 计算代码运行时间
- 使用console进行 性能测试 和 计算代码运行时间
原文:http://www.tuicool.com/articles/JrARVjv 对于前端开发人员,在开发过程中经常需要监控某些表达式或变量的值,如果使用用 debugger 会显得过于笨重,最常 ...
- Objective-C 计算代码运行时间
今天看到一篇关于iOS应用性能优化的文章,其中提到计算代码的运行时间,觉得非常有用,值得收藏.不过在模拟器和真机上是有差异的,以此方法观察程序运行状态,提高效率. 第一种:(最简单的NSDate) N ...
- php计算代码运行时间与内存使用的一段代码
计算运行时间及内存使用,代码如下: <?php //开始计时 $HeaderTime = microtime(true);//参数true表示返回浮点数值 //代码 //... printf(& ...
- 使用Objective-C 计算代码运行时间
第一种:(最简单的NSDate) NSDate* tmpStartData = [NSDate date]; //You code here... double deltaTime = [[NSDat ...
- C# 计算代码运行时间
Stopwatch watch = new Stopwatch(); watch.Start(); int num = myhelper.MySQLExecuteNonQuery(comlist); ...
- python计算代码运行时间的装饰器
import time def cal_time(func): def wrapper(*args, **kwargs): t1 = time.time() result = func(*args, ...
- C语言--计算代码段运行时间
c语言中有专一包含计算时间函数的头文件,time.h.当我们需要计算某段程序运行的时间时就需要用到time.h包含的clock()函数,在这里介绍一下如何使用这个函数计算代码运行时间. clock函数 ...
- 计算Python代码运行时间长度方法
在代码中有时要计算某部分代码运行时间,便于分析. import time start = time.clock() run_function() end = time.clock() print st ...
随机推荐
- java.lang.StringBuffer源码分析
StringBuffer是一个线程安全的可变序列的字符数组对象,它与StringBuilder一样,继承父类AbstractStringBuilder.在多线程环境中,当方法操作是必须被同步,Stri ...
- head 头标签(转发)
HTML head 头标签 paddingme | 04 Oct 2014 HTML head 头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商 ...
- arguments.callee 调用自身
一.Arguments该对象代表正在执行的函数和调用他的函数的参数.[function.]arguments[n]参数function :选项.当前正在执行的 Function 对象的名字.n :选项 ...
- Java知识总结--JDBC&XML
1说说jdbc连接数据库的步骤 1.注册驱动 2.获得连接 3.执行sql语句 4.获得结果集,进行结果集的处理 5.关闭结果集 6.关闭连接,释放资源 2 statement 和preparedst ...
- 【转】WPF获取外部EXE图标最简单的方法
首先在工程添加对System.Drawing的引用 创建以下方法: public static ImageSource GetIcon(string fileName) { System.Drawin ...
- php获取汉字首字母的函数
本文介绍用php实现汉字转化为首字母的方法,主要功能是:功能明确,易于修改维护和扩展: 英文的字串:不变返回(包括数字):中文字符串:返回拼音首字符: 中英混合串: 返回拼音首字符和英文. 网上的方法 ...
- 修改centos环境变量
1.vim /etc/profile 2.PATH=$PATH:/usr/local/php/bin;export PATH 3.source /etc/profile
- 高性能IO设计的Reactor和Proactor模式(转)
在高性能的I/O设计中,有两个比较著名的模式Reactor和Proactor模式,其中Reactor模式用于同步I/O,而Proactor运用于异步I/O操作. 在比较这两个模式之前,我们首先的搞明白 ...
- 2015版App推广全攻略(完整版)
线上渠道 1.基础上线 各大手机厂商市场.第三方应用商店.大平台.PC下载站.手机WAP站.收录站.移动互联网应用推荐媒体等等基本可以覆盖Android版本发布渠 道:推广的第一步是要上线,这是最基础 ...
- Silverlight应用程序中调用WCF Ria Services访问数据库图片
WCF Ria Services(通常称为RIA服务),专门设计让Silverlight应用程序访问数据库,网上有关其示例应用都是基于简单的数据显示,其中MSDN网站上有详细的解决方案介绍,地址htt ...