J'ai vu une méthode d'utilisation de JS pour détecter l'utilisation du processeur dans les problèmes de Github de Yu Bo, et je pensais que c'était génial.
Je l'ai implémenté moi-même et j'ai ajouté une fonction de dessiner des histogrammes pour voir visuellement l'utilisation du processeur.
Voir l'effet: Portail
Réaliser l'idée
En fait, il est SetInterval, qui utilise l'heure actuelle pour soustraire l'heure de la dernière fois exécutée par l'enregistrement de la minuterie pour obtenir le décalage horaire pour refléter le retard CPU, qui reflète indirectement le taux d'utilisation du CPU.
La copie de code est la suivante:
var data = [], t;
var cputimer = setInterval (function () {
t && data.push (data.now () - t);
t = data.now ();
}, 500);
En théorie, les données devraient être [500 500 500 500 ...], mais en fait, le CPU retardera certainement légèrement et les données peuvent être [501 502 502 501 503 ...]. Si le taux d'utilisation du processeur est élevé, la latence sera très importante et les données deviendront [550 551 552 552 551 ...]. En jugeant le changement de données, le taux d'utilisation du CPU peut être initialement déduit.
Représentation intuitive de l'utilisation du processeur à l'aide de l'histogramme
En dessinant un histogramme de données, nous pouvons voir les fluctuations des données. Lorsque la valeur d'une certaine période de temps dans l'histogramme augmente fortement, cela prouve que le taux d'utilisation du processeur est élevé à ce moment.
La copie de code est la suivante:
fonction DrawHisto (data) {
var cvs = document.getElementById ('canvas');
ctx = cvs.getContext ('2d');
var largeur = cvs.width,
hauteur = cvs.height,
Histowidth = largeur / taille;
// Repaindre l'histogramme
ctx.fillStyle = "#fff";
ctx.fillrect (0,0, largeur, hauteur);
ctx.beginPath ();
ctx.linewidth = HistowIdth / 2;
ctx.strokestyle = '# 000';
pour (var i = 0, len = data.length; i <len; i ++) {
var x = i * Histowidth,
// +5, / 20, -10 est juste dans le but d'afficher l'effet,
// ~~ est une valeur numérique qui équivaut à math.floor ()
y = ~~ ((data [i] - vitesse + 5) / 20 * (hauteur-10));
ctx.moveto (x + histowidth / 2, hauteur);
ctx.lineto (x + histowidth / 2, hauteur-y);
ctx.stroke ();
}
}