javascriptのパフォーマンス調査をするscript
を、作りました。
例えば下記のような感じで、たくさん関数が入っているオブジェクト(ここではersObj)があった場合、
var ersObj = { payCk:function(){ //処理 }, sendCk:function(){ //処理 }, addressCk:function(){ //処理 }, smoothScroll:function(){ //処理 }, searchCate:function(){ //処理 }, simgChange:function(){ //処理 }, matrixChange:function(){ //処理 } }
※関数名は気にしないでください。
ersObj内にある関数のパフォーマンスを調査したいので、
上記が実行される前に、下記を実行させるように読み込ませます。
var Performance = { timeSet:function(){ var timer = new Date(); return timer.getTime(); }, resultDisp:function(start,end,key){ var outputTag = document.createElement('textarea'); outputTag.id='performance'; outputTag.style.position = 'absolute'; outputTag.style.top = 100 + 'px'; outputTag.style.width = 300 + 'px'; outputTag.style.height = 150 + 'px'; outputTag.style.left = 0; document.getElementsByTagName('body')[0].appendChild(outputTag); this.dispNode = document.getElementById('performance'); this.resultOutput(); }, resultText:'', resultOutput:function(start,end,key){ this.dispNode.innerHTML = this.resultText; }, setUp:(function(){ for(i in ersObj){ var funcText = ersObj[i].toString(); var funcBody = funcText.slice(funcText.indexOf('{') + 1,funcText.lastIndexOf('}')); funcBody = 'var start = Performance.timeSet();' + funcBody + 'var end = Performance.timeSet();Performance.resultText = Performance.resultText + "' + i + '" + "は" + (end-start) + "ミリ秒で処理されました。" + "\\n"'; var funcArg = funcText.slice(funcText.indexOf('(') + 1,funcText.indexOf(')')); ersObj[i] = new Function(funcArg,funcBody); } $(document).ready(function(){Performance.resultDisp();}); })(), }
処理の内容は、
1)オブジェクト内にある関数に対して順番に
2)関数の内容を取得して
3)最初と最後に、処理された時刻をミリ秒で生成させて差分を取るコードを埋め込み
4)オブジェクトに対してnew Functionして戻してあげる。
というような事です。
最後に書いてある
$(document).ready(function(){Performance.resultDisp();});
は、調査結果を出力させるための処理。
ちなみにこの部分はjqueryありきで作成していますが、
jqueryを使用しない場合、addLoadEventなどで書き変える必要ありですね。
結果は左上の方にtextareaが出てきて、その中に「smoothScrollは24ミリ秒で処理されました。」的な
感じで表示されるはずです。
今日のお疲れ!BGM♪
風吹けば恋/チャットモンチー