Benchmarking von Browsergrafiken in aller Kürze: Zeichnen Sie so viel wie möglich, während Sie eine gleichmäßige Frame-Rate beibehalten. Sobald deine Framerate sinkt, weißt du, wie viel du pro Frame zeichnen kannst. Ende des Posts. Nein? Okay, ich werde etwas näher erklären.
Beispielzeit! Hier ist ein kleines Code-Snippet mit einer Benchmarking-tick-Funktion. Die Funktion tick ruft eine draw-Funktion mit zunehmender Zeichenlast auf, bis der Zeichnungsdurchgang konstant länger als 33 ms dauert.
var t, previousTime;
var drawLoad = 1;
var slowCount = 0;
var maxSlow = 10;
// Note, you might need to polyfill performance.now and requestAnimationFrame
t = previousTime = performance.now();
var tick = function() {
var maximumFrameTime = 1000/30; // 30 FPS
t = performance.now();
var elapsed = t - previousTime;
previousTime = t;
if (elapsed < maximumFrameTime || slowCount < maxSlow) {
if (elapsed < maximumFrameTime) {
drawLoad+=10;
} else {
slowCount++;
}
draw(drawLoad);
requestAnimationFrame(tick);
} else {
// found maximum sustainable load at 30 FPS
document.getElementById('res').innerHTML = ("could draw "+(drawLoad)+" in " +
maximumFrameTime + " ms");
}
};
requestAnimationFrame(tick);
Sehen Sie sich das Live-Beispiel auf jsFiddle an.
Sie können sehen, wie die Benchmark so lange ansteigt, bis sie den Punkt erreicht, an dem sie nachlässt. So können Sie ganz einfach herausfinden, wie viel Sie mit einer gleichmäßigen Framerate zeichnen können. Sie können auch Ihre eigene Zeichenfunktion in das Beispiel einbinden und ein benutzerdefiniertes Benchmarking durchführen.
Häufige Vorbehalte und Fallstricke beim Benchmarking von Browsergrafiken
Wenn das obige Beispiel die gute Methode ist, welche nicht so nett sind? Die Methoden, die dazu führen, dass du irrelevante Aspekte Benchmarking bewertest oder die dir merkwürdige Leistungsmesswerte liefern, die nichts mit der Ausführungsgeschwindigkeit deiner App zu tun haben. Gute Frage. Hier sind die beiden häufigsten Fragen im Web.
Maximale fps messen: Zeichnen Sie ein bisschen aus jedem Frame und messen Sie die fps. Es funktioniert nicht gut für die Messung der Grafikleistung in Chrome, da die zugrunde liegende Grafikimplementierung mit der Bildschirmaktualisierungsrate synchronisiert wird, sodass Sie maximal 60 Bildschirmaktualisierungen pro Sekunde erhalten. Es ist auch nicht sehr hilfreich, die Geschwindigkeit des Zeichenaufrufs zu messen, da das Zeichensystem von Chrome Ihre Zeichenbefehle in einen Befehlspuffer legt, der bei der nächsten Bildschirmaktualisierung ausgeführt wird.
Die Verwendung von setTimeout zum Messen der Grafikleistung ist nicht empfehlenswert. Das setTimeout-Intervall ist in Browsern auf 4 ms begrenzt, sodass Sie es maximal mit 250 fps nutzen können. In der Vergangenheit gab es bei Browsern unterschiedliche Mindestintervalle, sodass Sie möglicherweise eine sehr defekte Draw-Benchmark hatten, die zeigte, dass Browser A mit 250 fps (min. 4 ms) und Browser B mit 100 fps (min. 10 ms) ausgeführt wurde. A ist eindeutig schneller! Nein. Es könnte sein, dass B den Zeichencode schneller ausgeführt hat als A, z. B. A hat 3 ms benötigt und B hat 1 ms benötigt. Dies wirkt sich nicht auf die fps aus, da die Zeichenzeit unter dem minimalen setTimeout-Intervall liegt. Und wenn der Browser asynchron rendert, sind alle Einsatzmöglichkeiten aus. Verwenden Sie setTimeout nur, wenn Sie wissen, was Sie tun.
Und so gehts
Besser zum Benchmarking ist es, eine realistische Zeichenlast zu verwenden und diese zu multiplizieren, bis die Framerate nachlässt. Wenn Sie beispielsweise ein Top-Down-Spiel mit Kachelkarten-Gelände schreiben, versuchen Sie, die Kachelkarte jeden Frame zu zeichnen und zu prüfen, ob sie mit 60 fps läuft. Wenn ja, erhöhen Sie die Last (zeichnen Sie die Kachelkarte zweimal pro Frame mit einem klaren Punkt dazwischen). Erhöhen Sie weiter, bis die fps auf ein neues stabiles Niveau fällt. Jetzt wissen Sie, wie viele Ebenen der Kachelkarte Sie pro Frame zeichnen können.
Unterschiedliche Grafikanwendungen haben unterschiedliche Anforderungen, daher sollten Sie Ihre Benchmarks berücksichtigen. Messen Sie die Grafikfunktionen, die Sie in Ihrer App verwenden. Wenn Sie feststellen, dass ein Szenario zu langsam ist, versuchen Sie, dies auf den kleinsten Code zu reduzieren, mit dem es reproduziert wird. Senden Sie gegebenenfalls einen Fehlerbericht unter new.crbug.com.
Wie Sie Code für leistungsstarke Webgrafiken schreiben, erfahren Sie im Vortrag von Nat Duca und Tom Wiltzius vom Chrome GPU-Team bei der Google I/O 2012.