Vi un método para usar JS para detectar el uso de la CPU en los problemas de Github de Yu Bo antes, y pensé que era genial.
Lo implementé yo mismo y agregué una función de dibujar histogramas para ver visualmente el uso de la CPU.
Ver el efecto: Portal
Darse cuenta de la idea
De hecho, es SetInterval, que utiliza el tiempo actual para restar el tiempo de la última vez que ejecuta el registro del temporizador para obtener la diferencia de tiempo para reflejar el retraso de la CPU, que refleja indirectamente la tasa de uso de la CPU.
La copia del código es la siguiente:
var data = [], t;
var cputimer = setInterval (function () {
t && data.push (data.now ()-t);
t = data.now ();
}, 500);
En teoría, los datos deben ser [500,500,500,500 ...], pero de hecho la CPU definitivamente se retrasará ligeramente, y los datos pueden ser [501,502,502,501,503 ...]. Si la tasa de uso de la CPU es alta, la latencia será muy grande y los datos se convertirán en [550,551,552,552,551 ...]. Al juzgar el cambio en los datos, la tasa de uso de la CPU se puede inferir inicialmente.
Representación intuitiva del uso de CPU usando histograma
Al dibujar un histograma de datos, podemos ver las fluctuaciones de los datos. Cuando el valor de un cierto período de tiempo en el histograma aumenta bruscamente, demuestra que la tasa de uso de la CPU es alta en ese momento.
La copia del código es la siguiente:
function drawhisto (data) {
var cvs = document.getElementById ('Canvas');
ctx = cvs.getContext ('2d');
ancho de var = cvs.width,
altura = cvs.Height,
histowidth = ancho / tamaño;
// Repintado histograma
ctx.fillstyle = "#fff";
ctx.fillrect (0,0, ancho, altura);
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 es solo con el fin de mostrar el efecto,
// ~~ es un valor numérico que es equivalente a Math.floor ()
y = ~~ ((datos [i] - velocidad + 5) / 20 * (altura -10));
ctx.moveto (x+histowidth/2, altura);
ctx.lineto (x+histowidth/2, altura-y);
ctx.stroke ();
}
}