Erstellen Sie eine wiederholbare Stressszene
Erstellen Sie einen Testzustand mit einer bekannten Anzahl beweglicher Objekte, überlappenden Effekten und Textbeschriftungen. Erfassen Sie eine Aufnahme oder einen festen Seed, sodass jeder Lauf ungefähr die gleiche Arbeit darstellt. Vergleichen Sie eine leere Szene mit der überfüllten Szene und prüfen Sie dann, ob Zeit für JavaScript-Updates, Leinwandzeichnung, Bilddecodierung oder Stil- und Layoutarbeit aufgewendet wird.
Wenn vor allem das Zeichnen Zeit kostet, testen Sie das Bündeln ähnlicher Pfade, weniger unnötige Zustandsänderungen oder das Rendern nur der geänderten Bereiche. Kostet die Aktualisierungslogik am meisten, untersuchen Sie stattdessen Kollisionsprüfungen und Objektiterationen mit dem Profiler. MDNs Canvas-Leitfaden beschreibt dies als zu prüfende Möglichkeiten, nicht als universelle Schalter mit garantiertem Geschwindigkeitsgewinn.
Eine Kostenquelle ändern und das Ergebnis prüfen
Wählen Sie eine vermutete Kostenquelle, etwa das wiederholte Zeichnen eines statischen Hintergrunds. Speichern Sie ihn in einem Offscreen-Canvas zwischen und vergleichen Sie die Ergebnisse mit derselben Szene vor und nach der Änderung. Prüfen Sie die Darstellung bei verschiedenen Größen und nach einer Größenänderung: Ein Cache kann veraltet sein, wenn er alte Abmessungen verwendet oder Text anders skaliert.
Notieren Sie Gerät, Browser, Szene und Aktion des Vergleichs. Ein Ergebnis von einem Gerät hilft bei der Diagnose dieses Laufs, belegt aber keine Leistung für alle Browser und Geräte. Wiederholen Sie die ursprüngliche Interaktion: Eine Optimierung, die eine künstliche Testsituation verbessert, kann die Eingabe an anderer Stelle trotzdem verschlechtern.
Fragen zu Canvas-Spielleistung
Soll ich nur geänderte Pixel neu zeichnen?
Dies hängt von der Komplexität der Szene ab und davon, wie kostspielig eine vollständige Neuzeichnung ist. Teilweises Rendern erhöht die Buchhaltung und kann zu veralteten Pixeln um sich bewegende Objekte führen. Vergleichen Sie daher beide Ansätze mit derselben reproduzierbaren Szene.
Verbessern Tipps zum Bündeln von Canvas-Zeichenoperationen garantiert die Leistung?
Nein. Sie sind prüfenswerte Hypothesen. Messen Sie den Zielbrowser und die Arbeitslast und behalten Sie eine Änderung nur bei, wenn sie den beobachteten Engpass verbessert, ohne die Darstellung zu beschädigen.
Weiterlesen
Etwas nicht mehr aktuell? Korrektur melden