JSを使用してYu BoのGitHubの問題で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 ...]でなければなりませんが、実際にはCPUは間違いなくわずかに遅れ、データは[501,502,502,501,503 ...]である可能性があります。 CPUの使用率が高い場合、レイテンシは非常に大きくなり、データは[550,551,552,552,551]になります。データの変更を判断することにより、CPUの使用率を最初に推測できます。
ヒストグラムを使用したCPU使用の直感的な表現
データのヒストグラムを描画することにより、データの変動を確認できます。ヒストグラムの一定期間の値が急激に上昇すると、CPUの使用率がその瞬間に高いことを証明します。
コードコピーは次のとおりです。
関数drawhisto（data）{
var cvs = document.getElementById（ 'canvas'）;
ctx = cvs.getContext（ '2d'）;
var width = cvs.width、
高さ= cvs.height、
histowidth = width / size;
//ヒストグラムを塗り直します
ctx.fillstyle = "#fff";
ctx.fillrect（0,0、幅、高さ）;
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] - 速度 + 5） / 20 *（height -10））;
ctx.moveto（x+histowidth/2、height）;
ctx.lineto（x+histowidth/2、height-y）;
ctx.stroke（）;
}
}