本文深入探讨了Firebug的console.profile()方法，演示了如何使用它来比较不同JavaScript代码片段的执行效率，如数组创建方式的性能差异。通过具体实例，展示了如何定位代码瓶颈，进行算法优化。
性能分析工具firebug.console.profile(title)
很多的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'
);
|
更加丰满的数据：
转载：振之
扫一扫
4159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
