Ich habe eine Methode zur Verwendung von JS gesehen, um die CPU -Nutzung in Yu Bo -GitHub -Problemen zu erkennen, und ich fand es großartig.
Ich habe es selbst implementiert und eine Funktion des Zeichnens von Histogrammen hinzugefügt, um die CPU -Verwendung visuell zu sehen.
Siehe den Effekt: Portal
Erkenne die Idee
Tatsächlich ist es ein SetInterval, der die aktuelle Zeit verwendet, um die Zeit des letzten Durchgangs des Timer -Datensatzes zu subtrahieren, um den Zeitunterschied zu erhalten, um die CPU -Verzögerung widerzuspiegeln, die indirekt die CPU -Nutzungsrate widerspiegelt.
Die Codekopie lautet wie folgt:
var data = [], t;
var cputimer = setInterval (function () {
t && data.push (data.now ()-t);
t = data.now ();
}, 500);
Theoretisch sollten die Daten [500.500.500.500 ...] sein, aber tatsächlich wird sich die CPU auf jeden Fall leicht verzögern, und die Daten können [501.502.502.501.503 ...] sein. Wenn die CPU -Nutzungsrate hoch ist, ist die Latenz sehr groß und die Daten werden [550.551.552.552.551 ...]. Durch die Beurteilung der Datenänderung kann die CPU -Nutzungsrate zunächst abgeleitet werden.
Intuitive Darstellung der CPU -Verwendung unter Verwendung von Histogramm
Durch das Zeichnen eines Datenhistogramms können wir die Datenschwankungen sehen. Wenn der Wert eines bestimmten Zeitraums im Histogramm stark steigt, zeigt er, dass die CPU -Nutzungsrate in diesem Moment hoch ist.
Die Codekopie lautet wie folgt:
Funktion Drawhisto (Daten) {
var cvs = document.getElementById ('canvas');
ctx = cvs.getContext ('2d');
var width = cvs.width,
Höhe = cvs.height,
Histowidth = Breite / Größe;
// Histogramm neu streichen
ctx.fillStyle = "#fff";
Ctx.FillRect (0,0, Breite, Höhe);
ctx.beginPath ();
ctx.linewidth = histowidth/2;
ctx.strokestyle = '#000';
für (var i = 0, len = data.length; i <len; i ++) {
var x = i * histowidth,
// +5, /20, -10 dient nur zum Ziel, den Effekt anzuzeigen,
// ~~ ist ein numerischer Wert, der math.floor () gleichwertig entspricht
y = ~~ ((Daten [i] - Geschwindigkeit + 5) / 20 * (Höhe -10));
ctx.moveto (x+histowidth/2, Höhe);
ctx.lineto (x+histowidth/2, Höhe-y);
ctx.stroke ();
}
}