CPU-Test

So funktioniert das Script

Das Script besteht aus vier Teilen: einer Messschleife, die sich selbst immer wieder aufruft, einer Zeichenfunktion für eine einzelne Linie, einer Verteilfunktion, die den Messwert auf die drei Diagramme aufteilt, und dem Start-Stopp-Knopf. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts auf derselben Seite kollidieren.

function ctime() {
  const diff = Date.now() - letzteZeit;
  anzeige.textContent = diff;
  timer = setTimeout(ctime, 1);
  setTimeout(function () { draw(diff); }, 5);
  letzteZeit = Date.now();
}

Das ist die Messung. Date.now() liefert die aktuelle Uhrzeit als Zahl in Millisekunden; die Differenz zur zuletzt gemerkten Zeit ist der gesuchte Abstand. Anschließend bestellt sich die Funktion mit setTimeout(ctime, 1) selbst für die nächste Millisekunde — eine Schleife, die dem Browser zwischen zwei Durchläufen Luft lässt, ganz anders als eine while-Schleife, die den Browser blockieren würde. Das Zeichnen wird mit fünf Millisekunden Verzögerung angestoßen, damit es nicht direkt in der Messung steckt und diese verfälscht. Zum Schluss wird die Zeit für die nächste Runde gemerkt.

Die Originalfassung übergab an setTimeout einen Text ("ctime()"), den der Browser dann wie eval auswerten musste. Heute übergibt man die Funktion selbst — das ist schneller, sicherer und wird vom Browser auch überprüft, wenn man sich vertippt.

function linie(flaeche, kontext, pos, val) {
  const neu = { x: pos.x + 2, y: flaeche.height - val };
  kontext.beginPath();
  kontext.moveTo(pos.x, pos.y);
  kontext.lineTo(neu.x, neu.y);
  kontext.stroke();

Hier wird gezeichnet. Ein Punkt auf der Zeichenfläche besteht aus zwei Zahlen: x ist der Abstand vom linken Rand, y der vom oberen. Der neue Punkt liegt zwei Pixel weiter rechts als der letzte, und seine Höhe ist flaeche.height - val — je größer der Messwert, desto weiter oben der Punkt, weil y nach unten wächst. beginPath() beginnt einen frischen Linienzug, moveTo() setzt den Stift auf den alten Punkt, lineTo() zieht ihn zum neuen, und erst stroke() macht die Linie sichtbar.

  if (neu.x > flaeche.width) {
    neu.x = 0;
    kontext.clearRect(0, 0, flaeche.width, flaeche.height);
  }
  return neu;
}

Ist die Kurve am rechten Rand angekommen, wird die Fläche mit clearRect() vollständig geleert und der Stift wieder nach ganz links gesetzt — die Kurve läuft also von vorn los. return neu gibt den erreichten Punkt zurück; die aufrufende Stelle merkt ihn sich als Ausgangspunkt für die nächste Linie.

if (counter >= 10) {
  lpos2 = linie(c2, gfx2, lpos2, val);
  counter = 0;
} else {
  counter++;
}

So entstehen die drei unterschiedlichen Auflösungen. Für das erste Diagramm wird bei jedem Messwert eine Linie gezogen. Für das zweite zählt counter mit: Erst wenn er 10 erreicht hat, wird gezeichnet und wieder auf 0 gesetzt — es kommt also nur jeder elfte Messwert aufs Papier. Für das dritte Diagramm macht counter2 dasselbe mit dem Grenzwert 100. Wollt ihr die Diagramme anders staffeln, ändert ihr einfach diese beiden Zahlen.

function starten() {
  if (timer !== null) return;
  letzteZeit = Date.now();
  schalter.textContent = "Anhalten";
  ctime();
}

Der Knopf schaltet die Messschleife an und aus. Beim Anhalten bricht clearTimeout(timer) den bereits bestellten nächsten Aufruf ab, und timer wird auf null gesetzt — daran erkennt das Script, dass gerade nicht gemessen wird. Beim Neustart wird letzteZeit zuerst auf die aktuelle Uhrzeit gestellt, sonst würde die gesamte Pause als ein einziger riesiger Messwert im Diagramm landen. Die Prüfung if (timer !== null) return; verhindert, dass versehentlich zwei Schleifen gleichzeitig laufen.

Zum Anpassen: Die Farben der drei Kurven stehen in den strokeStyle-Zeilen (die Originalfassung nutzte reines Rot, Grün und Blau, hier sind es etwas gedecktere Töne). Die Höhe der Diagramme regelt das height-Attribut der <canvas>-Elemente, und der Wert pos.x + 2 bestimmt, wie schnell die Kurve nach rechts wandert — mit 1 läuft sie doppelt so lange, bis sie den Rand erreicht.