JavaScriptを利用してCPUの使用率を測定し、自分で書いた

1579 ワード

この前、玉伯のGithub IssuesでJSを使ってCPUの使用率を測定する方法を見ました.とてもいいと思います.
特に自分で実現しました.ヒストグラムを描く機能を加えると、CPUの使用率を直感的に見ることができます.
効果はどうですか?
思想を実現する
つまり、setIntervalは、前回の実行timer記録の時間を現在の時間で差し引いて、CPUの遅延を反映する時間差を得て、CPUの使用率を側面に反映しています.
 
  
var data = [],t;
var cpuTimer = setInterval(function(){
t && data.push(Data.now()-t);
t = Data.now();
},500);
理論的にdataを得たのは[500,500,500,500,500...]ですが、CPUは実際には少し遅れているはずです.dataは[501,502,502,501,503...]かもしれません.CPUの使用率が高いと、遅延が大きくなり、dataは[550,551,552,551,552,551...]となります.dataの変化を判断することで、CPUの使用率を初期的に推定することができる.
ヒストグラムを使ってCPUの使用率を直観的に表します.
dataのヒストグラムを描くことによって,データの変動状況を見ることができる.ヒストグラムの中のある期間の数値が急に上昇すると、その時点でCPUの使用率が高いことが証明されます.
 
  
function drawHisto(data){
var cvs = document.getElementById('canvas');
ctx = cvs.getContext('2d');
var width = cvs.width,
height = cvs.height,
histoWidth = width / size;

//
ctx.fillStyle = "#fff";
ctx.fillRect(0,0,width,height);
ctx.beginPath();
ctx.lineWidth = histoWidth/2;
ctx.strokeStyle = '#000';
for( var i = 0, len = data.length; i < len; i++){
var x = i * histoWidth,
// +5、/20、-10 ,
// ~~ Math.floor()
y = ~~( (data[i] - speed + 5) / 20 * (height-10) );
ctx.moveTo( x+histoWidth/2, height );
ctx.lineTo( x+histoWidth/2, height-y );
ctx.stroke();
}
}