Javascript 性能测试工具 FireJSPT

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