Posts Tagged jsprofiler

JSProfiler v0.2 更新

JSProfiler v0.2 更新,改善了分析界面,增加了使用实例,打包了新的Chrome插件:
下载地址:JSProfiler v0.2

可二次开发

除了通过Chrome浏览器插件方式使用JSProfiler外,新增加了另一种使用方式:直接引入Profiler.js和Profiler.css到自己的网页中,类似下面的代码:

<!-- include profiler.js and profiler.css -->
<script type="text/javascript" src="../jsprofiler/Profiler.js"></script><script type="text/javascript">// <![CDATA[
window.addEventListener("load", function(){
//init js profiler ------ 1
var profiler = Profiler.init(window);

//start js profiler ----- 2
profiler.start();

//do some thing --------- 3
doTest();

//stop js profiler ------ 4
setTimeout(function(){
profiler.stop();
});
}, false);

// ]]></script>

JSProfiler API

这里简单介绍一下JSProfiler的API使用
Profiler.init: function(window) – 初始化分析器,并创建一个分析面板,并得到一个Profiler类的实例对象,用于后面使用,这里的传入参数是需要调试的window对象,默认是当前window,如果被测试window与当前window不同(比如在网页a.html中分析页面b.html中函数调用情况),则需要传入此参数。
Profiler#start: function() – 开始分析
Profiler#stop: function() – 停止分析,如果有分析面板,则会自动显示分析报表。

分析面板 – Profiler.Panel
调用Profiler.init()会自动创建一个分析面板实例,界面呈现如下:

完整实例

下面的例子演示了如何使用JSProfiler来分析自己的web项目,比如分析某次处理过程,通常的步骤是:
1、初始化Profiler对象
2、开始分析
3、测试用例,用户处理过程
4、定制分析,生成报表

sample.html
<!DOCTYPE html>
<html>
<head>
    <title>JSProfiler Sample</title>
    <style>
    body{
        margin:0;
        color: #333;
        font-family: verdana, helvetica, arial, sans-serif;
        font-size: 8pt;
    }
    h2{
        text-align: center;
    }
    .Panel{
        color: #DDD;
        -khtml-user-select : none;
        -webkit-user-select : none;
        -moz-user-select : none;
        width: 500px;
        height: 260px;
        background-color: black;
        margin: 20px auto;
        border: solid 16px #EEEEEE;
        box-shadow: 0 0 16px #000000;
        border-radius: 8px;
        position : relative;
        overflow: auto;
    }
    .Node{
        cursor: default;
        padding: 3px;
        border-radius: 2px;
        background-color: #EEEEEE;
        position: absolute;
    }
    </style>
    <script type="text/javascript" src="sample.js"></script>
    <script type="text/javascript">
    function doTest(){
        var sample = new yCoder.ProfilerSample(document.getElementById("canvas"));
        sample.loadNodes(100);
    }
    </script>
    
    <!-- include profiler.js and profiler.css -->
    <link rel="stylesheet"  href="../jsprofiler/Profiler.css" />
    <script type="text/javascript" src="../jsprofiler/Profiler.js"></script>
    <script type="text/javascript">
    window.addEventListener("load", function(){
        //init js profiler ------ 1
        var profiler = Profiler.init(window);
        
        //start js profiler ----- 2
        profiler.start();
        
        //do some thing --------- 3
        doTest();
        
        //stop js profiler ------ 4
        setTimeout(function(){
            profiler.stop();
        });
    }, false);
    </script>
</head>
<body>
<h2>JSProfiler Sample</h2>
<div id='canvas' class="Panel" ></div>
</body>
</html>

sample.js

var yCoder = {
__index: 0,
createNodes : function(parent, w, h, count, backgroundColor){
var i = 0;
while(i++ < count){
var x = Math.floor(Math.random()*w);
var y = Math.floor(Math.random()*h);
var div = document.createElement("div");
div.id = yCoder.__index++;
div.setAttribute("class", "Node");
div.style.backgroundColor = backgroundColor;
div.innerHTML = "" + x + " - " + y;
var tx = div.clientWidth / 2;
var ty = div.clientWidth / 2;
div.style.left = (x - tx) + "px";
div.style.top = (y - ty) + "px";
parent.appendChild(div);
}
}
};
yCoder.ProfilerSample = function(canvas){
this.init(canvas);
}
yCoder.ProfilerSample.prototype = {
init : function(canvas){
this.canvas = canvas;
var _this = this;
this.canvas.addEventListener("mousemove", function(evt){
_this.onmousemove.call(_this, evt);
}, false);
},
onmousemove : function(evt){
var target = evt.target;
if(!target || target.getAttribute("class") != "Node"){
return;
}
this.unhighlight();
this.highlight(target);
},
highlight: function(target){
this.currentElement = target;
this.currentElement.style.zIndex = "10";
this.currentElement.style.border = "2px solid";
},
unhighlight: function(){
if(this.currentElement){
this.currentElement.style.border = "";
this.currentElement.style.zIndex = "0";
}
},
loadNodes: function(){
var w = this.canvas.clientWidth;
var h = this.canvas.clientHeight;
yCoder.createNodes(this.canvas, w, h, 100, "green");
yCoder.createNodes(this.canvas, w, h, 100, "red");
yCoder.createNodes(this.canvas, w, h, 100, "blue");
this.deleteNodes("green");
},
deleteNodes: function(backgroundColor){
var childNodes = this.canvas.childNodes;
for(var i = 0, length = childNodes.length; i < length; i++){
var div = childNodes.item(i);
if(div && div.nodeType == 1 && div.style.backgroundColor == backgroundColor){
this.canvas.removeChild(div);
}
}
}
}

运行界面:

JSProfiler – JS性能分析工具

最近我做了一个javascript分析的工具,类似Java中的JProfiler,用于监测javascript类和函数调用时间,调用次数以及其调用路径等,JSProfiler使用树形结果直观的显示这些信息,让开发者能快速定位性能瓶颈所在之处,便于js类库和web应用程序的调优和分析。

为了更方便的使用,特意做了一个chrome插件的版本,赶在回家过年之前发布出来供大家使用,本来要放到chrome app store上去,但china不在服务地区,没法上传,于是只能先提供zip下载
chrome插件下载地址:JSProfiler Chrome Extension 0.1

详见:http://www.ycoder.com/jsprofiler/