JavaScript を使用して、myself_javascript スキルによって記述された CPU 使用率を検出する

以前、Yubo の Github Issues で JS を使用して CPU 使用率を検出する方法を見て、とても素晴らしいと思いました。
自分で実装して、CPU使用率を視覚的に確認するためにヒストグラムを描画する機能を追加しました。

効果については、次を参照してください。 ポータル

実装アイデア

は、実際には setInterval であり、現在の時刻を使用して、最後のタイマー実行によって記録された時間を減算して、 CPU 遅延を反映する時間差。これは CPU 使用率を反映します。

コードをコピーします コードは次のとおりです。

var data = [],t; 🎜>var cpuTimer = setInterval(function(){
t && data.push(Data.now()-t);
t = Data.now();
},500); >

理論的にはデータは [500,500,500,500,500...] になるはずですが、実際には CPU が確実にわずかに遅れて、データは [501,502,502,501,503...] になる可能性があります。 CPU使用率が高いと遅延が大きくなり、データは[550,551,552,552,551...]となります。データの変化を判断することで、CPU 使用率を最初に推測できます。

ヒストグラムを使用して CPU 使用率を視覚的に表現します

データのヒストグラムを描くことで、データの変動がわかります。ヒストグラムの値が一定期間で急激に上昇している場合、その時点でCPU使用率が高いことがわかります。

コードをコピー コードは次のとおりです。

functiondrawHisto(data){

var cvs = document.getElementById('canvas');
ctx = cvs.getContext('2d');
var width = cvs.width,
height = cvs.height,
histoWidth =幅 / サイズ ;

//ヒストグラムを再描画
ctx.fillStyle = "#fff";
ctx.fillRect(0,0,width,height); ;
ctx.lineWidth = histoWidth/2;
ctx.ストロークスタイル = '#000';
for( var i = 0, len = data.length; i var x = i * histoWidth,
// 5、/20、-10 は表示効果のみです。
// ~~ は Math.floor() と同等の数値丸めです
y = ~ ~( (データ[i] - 速度 5) / 20 * (高さ-10) );
ctx.moveTo( x histoWidth/2, height );
ctx.lineTo( x histoWidth/2, height- y ) ;
ctx.ストローク()
}
}