Utilisez JavaScript pour détecter l'utilisation du processeur écrit par les compétences yourself_javascript

J'ai déjà vu la méthode d'utilisation de JS pour détecter l'utilisation du processeur dans les problèmes Github de Yubo, et j'ai trouvé que c'était très cool.
Je l'ai implémenté moi-même et j'ai ajouté une fonction pour dessiner un histogramme afin de voir visuellement l'utilisation du processeur.

Pour l'effet, veuillez consulter : Portail

L'idée d'implémentation

est en fait setInterval, qui utilise l'heure actuelle pour soustraire l'heure enregistrée par la dernière exécution de la minuterie pour obtenir le La différence de temps pour refléter le retard du processeur reflète l'utilisation du processeur.

Copier le code Le code est le suivant :

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

Théoriquement, les données devraient être de [500 500 500 500 500...], mais en fait, le processeur sera certainement légèrement retardé et les données pourraient être de [501 502 502 501 503...]. Si l'utilisation du processeur est élevée, le délai sera important et les données deviendront [550,551,552,552,551...]. En jugeant les changements dans les données, l'utilisation du processeur peut être initialement déduite.

Utilisez un histogramme pour représenter visuellement l'utilisation du processeur

En dessinant un histogramme des données, nous pouvons voir la fluctuation des données. Lorsque la valeur de l'histogramme augmente fortement pendant une certaine période, cela prouve que l'utilisation du processeur est élevée à ce moment-là.

Copier le code Le code est le suivant :

fonction drawHisto(data){

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

//Redessiner l'histogramme
ctx.fillStyle = "#fff"
ctx.fillRect(0,0,width,height)
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 sont juste pour l'effet d'affichage,
// ~~ est l'arrondi numérique équivalent à Math.floor()
y = ~ ~( (data[i] - vitesse 5) / 20 * (hauteur-10) );
ctx.moveTo( x histoWidth/2, height ); y ) ;
ctx.stroke();
}
}