Saya melihat metode menggunakan JS untuk mendeteksi penggunaan CPU dalam masalah gitub Yu Bo sebelumnya, dan saya pikir itu hebat.
Saya telah menerapkannya sendiri, dan menambahkan fungsi menggambar histogram untuk secara visual melihat penggunaan CPU.
Lihat Efeknya: Portal
Sadari idenya
Faktanya, ini adalah setInterval, yang menggunakan waktu saat ini untuk mengurangi waktu terakhir kali dieksekusi oleh catatan timer untuk mendapatkan perbedaan waktu untuk mencerminkan penundaan CPU, yang secara tidak langsung mencerminkan tingkat penggunaan CPU.
Salinan kode adalah sebagai berikut:
var data = [], t;
var cputimer = setInterval (function () {
t && data.push (data.now ()-t);
t = data.now ();
}, 500);
Secara teori, data harus [500.500.500.500 ...], tetapi pada kenyataannya CPU pasti akan sedikit menunda, dan data mungkin [501.502.502.501.503 ...]. Jika tingkat penggunaan CPU tinggi, latensi akan sangat besar dan data akan menjadi [550.551.552.552.551 ...]. Dengan menilai perubahan data, tingkat penggunaan CPU pada awalnya dapat disimpulkan.
Representasi intuitif penggunaan CPU menggunakan histogram
Dengan menggambar histogram data, kita dapat melihat fluktuasi data. Ketika nilai periode waktu tertentu dalam histogram meningkat tajam, itu membuktikan bahwa tingkat penggunaan CPU tinggi pada saat itu.
Salinan kode adalah sebagai berikut:
fungsi drawhisto (data) {
var cvs = document.geteLementById ('canvas');
ctx = cvs.getContext ('2d');
var width = cvs.width,
tinggi = cvs.height,
histowidth = lebar / ukuran;
// Kembali Histogram
ctx.fillstyle = "#fff";
ctx.fillrect (0,0, lebar, tinggi);
ctx.beginpath ();
ctx.linewidth = histowidth/2;
ctx.strokestyle = '#000';
untuk (var i = 0, len = data.length; i <len; i ++) {
var x = i * histowidth,
// +5, /20, -10 hanya untuk tujuan menampilkan efeknya,
// ~~ adalah nilai numerik yang setara dengan math.floor ()
y = ~~ ((data [i] - kecepatan + 5) / 20 * (tinggi -10));
ctx.moveto (x+histowidth/2, tinggi);
ctx.lineto (x+histowidth/2, tinggi-y);
ctx.stroke ();
}
}