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

この前、玉伯の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,501,503...]かもしれません。CPUの使用率が高いと、遅延が大きくなり、dataは[550,551,552,551,552,551...]となります。dataの変化を判断することで、CPUの使用率を初期的に推定することができる。ヒストグラムを使ってCPUの使用率を直観的に表します。データの変動状況を見ることができます。ヒストグラムの中のある期間の数値が急に上昇すると、その時点で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(); 
} 
}