使用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 ...
随机推荐
- 清橙OJ 1082 查找第K小元素 -- 快速排序
题目地址:http://oj.tsinsen.com/A1082 问题描述 给定一个大小为n的数组s和一个整数K,请找出数组中的第K小元素. 这是一个补充程序的试题,你需要完成一个函数: int fi ...
- OpenJudge 2739 计算对数
1.链接地址: http://bailian.openjudge.cn/practice/2739/ 2.题目: 总时间限制: 1000ms 内存限制: 65536kB 描述 给定两个正整数a和b.可 ...
- iOS 分类思想(2)
/******************* NSString+NumCount.h文件 ******************************/ #import <Foundation/Fo ...
- javascript 上传 预览图片 兼容 谷歌 ie
最近的项目要用到这块,但是在网上找了很多资料,很多都是假的,都不行,最后终于找到一个,还是可以兼容主流的,特分享给大家,可以用 <!DOCTYPE html PUBLIC "-//W3 ...
- c#通过反射获取类上的自定义特性
c#通过反射获取类上的自定义特性 本文转载:http://www.cnblogs.com/jeffwongishandsome/archive/2009/11/18/1602825.html 下面这个 ...
- FBWF和EWF的对比
最近在公司接触了嵌入式的wes7系统,wes7和wes2009是组件化的windows系统,除具有最新版的windows功能之外还具有适用于嵌入式系统的一些嵌入式功能,如例如EWF,FBWF. FBW ...
- Linux下GPIO驱动(三) ----gpio_desc()的分析
上篇最后提出的疑问是结构体gpio_chip中的成员函数set等是怎么实现的,在回答之前先介绍下gpio_desc这个结构体. 如上图所示,右上方部分为GPIO驱动对其它驱动提供的GPIO操作接口,其 ...
- UI设计的奥义
个人觉得一个好的UI应该具备如下特点 1.符合人类认知行为 2.契合人体生物学 3.平滑,流畅 4.适当的交互会让你的应用更加成功 5.动态的内容才是招蜂引蝶的资本
- Pjax介绍及在asp.net MVC3中使用pjax的简单示例
相信很多人对ajax并不陌生,对ajax的一些优点也了如指掌,如:局部刷新改善用户体验,减少开销,让服务器和浏览器之间的响应更快等. 但是它的缺点也是很显而易见的: AJAX大量的使用了javascr ...
- Java基础知识学习
1.什么是Java编程语言 Java是:一种编程语言.一种开发环境.一种应用环境.一种部署环境 2.Java编程语言的主要目标 (1)提供一种解释环境为:提高开发速度.代码可移植性.使用户能运行不止一 ...