博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
性能分析工具firebug.console.profile(title)
阅读量:6942 次
发布时间:2019-06-27

本文共 1425 字,大约阅读时间需要 4 分钟。

很多的web开发人员都使用Mozilla firefox并且绝大多数都使用firebug来测试、调试前端代码,firebug在调试html+css方面的能力是毋庸置疑的,但仅仅使用它来完成这样的任务并没有发挥firebug的巨大潜能。

JavaScript性能

随着web apps越来越庞大,JavaScript的性能也被推到风头浪尖,在此之前或许你已经知道哪些操作会减缓JavaScript程序运行速度,并且养成良好的编码习惯。

正如你所知道的,使用appendChild来增加Dom节点的效率要比innerHTML低下,那么为什么会这样呢?又如何验证这个观点的正确性?还有我最近发现的,在声明数组的时,应该使用数组直接量:

1
var
arr = [];

而不是:

1
var
arr =
new
Array;

但是我所说的,也未必是正确的吧!

console.profile()

这是firebug中一个很强大的方法,它可以提供给你测试代码片段执行的时间和一些性能分析数据,前提是测试的代码片段中要有function的执行,否则会提示“无任何可记录的活动”,如下图:

一个简单的测试例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function
createArray1(){
    
for
(
var
i=0;i<100000;i++){
        
var
arr = [];
    
}
}
function
createArray2(){
    
for
(
var
i=0;i<100000;i++){
        
var
arr =
new
Array;
    
}
}
console.profile(
'a'
);
createArray1();
console.profileEnd(
'a'
);
 
console.profile(
'b'
);
createArray2();
console.profileEnd(
'b'
);

直观的数据:

console.time()

由于createArray1和createArray2内部并没有执行其他的function,所以从上图中,我们仅仅能够得到测试代码片段执行所需的时间,如果基于仅满足这个需求,通过console.time()就完全可以实现了。

1
2
3
console.time(
'a'
);
createArray1();
console.timeEnd(
'a'
);

综合的数据分析

我们从不期盼某款浏览器,在运行自己编写程序的时候崩溃或者速度缓慢的让人抓狂,不过真的遇到了,还是应该先找到影响代码执行效率的问题所在,然后 才能针对某个算法做一些优化处理来减少JavaScript解释器的运算压力,加速程序运行。这正是profile的用武之地,透析firebug的数据 图,能让我们快速定位到测试代码执行全过程中,哪个function调用次数最多,耗时最多,从这个function的算法和各个细节入手,就可以迅速解 决问题。

最后附上一个例子:

1
2
3
console.profile(
'a'
);
var
No = that.getBetNo();
console.profileEnd(
'a'
);

更加丰满的数据:

转载:振之 

http://www.cnblogs.com/zhenn/archive/2011/02/20/1959186.html
你可能感兴趣的文章
转python调用Go代码
查看>>
红黑树(一)之原理和算法的详细分析【转】
查看>>
undefined reference to typeinfo - C++ error message
查看>>
springmvc: 普通list数据输出json
查看>>
8127 timeout!!! 搞死人啊
查看>>
Android开发 设置开机自动启动
查看>>
高德地图iOS SDK限制地图的缩放比例
查看>>
【组件化开发】前端进阶篇之如何编写可维护可升级的代码
查看>>
Node.js node主文件找不到时报出的Error:Cannot find module异常
查看>>
让SQL Server Compact支持 Membership, Role and Profile provider
查看>>
一个编译器的实现2——从文法到LL(1)分析表的概念和算法
查看>>
报表系统结构优化之中间数据外置
查看>>
《JAVA与模式》之门面模式
查看>>
vim/vi的文件内、跨文件复制粘贴操作、替换操作
查看>>
java命令执行jar文件
查看>>
python get class base name
查看>>
论这场云盘大战,以及各网盘的优劣
查看>>
怪异的JavaScript系列(三)
查看>>
辅助模式最终考验的是想象力,先来看看怎么用!| Accessibility
查看>>
TiDB 源码阅读系列文章(九) Hash Join
查看>>