FireBug的概况收集尽管还是比较好用，但是由于他是普遍式的性能跟踪，我们要在包含所有的JQ函数的跟踪信息的情况下，找到对我们有用的自定义的函 数性能信息并不容易。所以，为了自定义客户端性能测试的方便，我利用FireBug的插件API ，写了一个基于FireFox的性能测试工具FireJSPT ( Fire JavaScript Performance Test )，简要介绍如下：

?

1. 环境说明：

??? * firejspt不依赖于任何的插件库，即使脱离jQuery也能很好的工作。
??? * 目前只是在装有FireBug插件的浏览器上起作用，包括FireFox，Chrome ，对IE无效。

?

?
2. 引入firejspt的核心JS类库：

?
Js代码

?? 1. <script type="text/javascript"? src="firejspt.js"? ></script>?

<script type="text/javascript"? src="firejspt.js"? ></script>

?

?

?
3. 性能的监控代码的调用

?
Js代码

?? 1. <script type="text/javascript">?
?? 2.? //需要监控性能的代码功能块1?
?? 3.? function testFun1(){?
?? 4.????? for (var i=0;i<100;i++){?
?? 5.??????? $("#test").html("Hello World");?
?? 6.????? }?
?? 7.?? }?
?? 8.???
?? 9.?? //需要监控性能的代码功能块2?
? 10.?? function testFun2(){?
? 11.????? for (var i=0;i<500;i++){?
? 12.??????? $("#test").html("Hello World");?
? 13.????? }?
? 14.?? }?
? 15.???
? 16.? $(function(){?
? 17.?? //执行性能监控测试?
? 18.?? jspt.test(function(){testFun1();});?
? 19.?? jspt.test(function(){testFun2();});?
? 20.? });?
? 21. </script>?

<script type="text/javascript">
?//需要监控性能的代码功能块1
?function testFun1(){
???? for (var i=0;i<100;i++){
?????? $("#test").html("Hello World");
???? }
? }
?
? //需要监控性能的代码功能块2
? function testFun2(){
???? for (var i=0;i<500;i++){
?????? $("#test").html("Hello World");
???? }
? }
?
?$(function(){
? //执行性能监控测试
? jspt.test(function(){testFun1();});
? jspt.test(function(){testFun2();});
?});
</script>

?

?

下面是页面打开后，FireBug中的效果图：

?

?

?

FireJSPT性能测试

?

?
4. 更多扩展设定

?
Js代码

?? 1. //关闭性能监控的运行?
?? 2.? jspt.run=false;?
?? 3.???
?? 4.? //设置运行时间超过5ms就显示报警提示?
?? 5.? jspt.limit=5;?
?? 6.??
?? 7. //同时监控多个函数，自定义控制台显示名称?
?? 8.?? jspt.test(function(){testFun1(); testFun2();},"业务功能1");?

//关闭性能监控的运行
?jspt.run=false;
?
?//设置运行时间超过5ms就显示报警提示
?jspt.limit=5;

//同时监控多个函数，自定义控制台显示名称
? jspt.test(function(){testFun1(); testFun2();},"业务功能1");

?

?

?
5. 托管于Google Code

?

项目首页：http://code.google.com/p/firejspt/

下载地址：http://code.google.com/p/firejspt/downloads/list

?