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); } } } }
运行界面: