JSProfiler v0.2 更新

2012年2月28日, by sam. in HTML, Web. 没有评论

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);
}
}
}
}

运行界面：

Tags: , ,


+ 3 = 五