Warum wird in Chrome eine bessere Leistung erzielt, wenn die Entwicklerkonsole aktiv ist?

Question

Ich arbeite gerade an einem kleinen Leinwandspiel, das von Grund auf in reinem Javascript geschrieben wurde.

Das Spiel beinhaltet eine 2D-Beleuchtung Algorithmus similar to this one, aber mit einer Lichtquelle und 25 Polygone, die für etwa 30.000 Berechnungen pro Frame macht.

Meine Bildrate ist groß in Safari, meh in Chrome und unspielbar in Firefox. Wenn die Chrome-Entwicklerkonsole jedoch während des Spiels aktiviert ist, entspricht die Bildrate der Safari.

Was könnte der Grund dafür sein?

---

Nachdem die Kommentare der Fenstergröße vorgeschlagen könnte die Framerate werden beeinflusst, fand ich heraus, dass je kleiner das Fenster, desto glatter das Spiel läuft, aber nur in Chrom. Der Betrag, der auf dem Bildschirm gezeichnet wird oder Berechnungen, die vom Spiel verwendet werden, hängen nicht von der Bildschirmgröße ab.

ich messe die Framerate Unterschied rein Auge, und Sie können den Effekt in diesem Gifs sehen:

Bad, große Fenster:

Gut, kleines Fenster:

Das Spiel läuft im Browser viel glatter als in diesen Gifs ersichtlich ist, aber der Effekt ist immer noch spürbar.

Ich kann den gleichen Effekt mit dem ersten Beispiel in dem Link, den ich gepostet habe, erhalten. Ist es nur ich oder hat jemand den gleichen Effekt?

Noch seltsamer ... Ich habe den gleichen Effekt auf mehreren anderen Websites, wie Facebook, wenn ich den Home-Feed scrollen. Je größer das Fenster, desto choppiger wird das Scrollen. Ist das eine Chrome-spezifische Sache, erhält jemand ähnliche Ergebnisse?

Answer 1

Ich habe das auch in meinen Seiten/Anwendungen gesehen. Das Problem scheint für alles zu gelten, ist jedoch bei Canvas und beschleunigtem CSS stärker ausgeprägt. Soweit ich das beurteilen kann, ist dieses Problem ein Leistungsfehler in Bezug auf Chrome composited layer rendering. Grundsätzlich zerlegt Chrome die Seite in Ebenen und verwendet die GPU zum Rendern dieser Ebenen. Sie können diese anzeigen, indem Sie die Option "Komposit-Layer-Grenzen anzeigen" auf der Registerkarte "Rendern" auf der Entwicklerkonsole aktivieren. Die FPS-Leistung von Chrome nimmt mit zunehmender Anzahl der Composite-Layer ab, unabhängig davon, ob sich die Layer ändern oder nicht.

Hier ist ein unabhängiges Beispiel. Schritte zum Reproduzieren:

1. laden Sie diese Seite in Chrome, ist es eine relativ einfache animierte CSS Demo, die eine feste Größe wie Ihr Spiel ist: http://www.subcide.com/experiments/fail-whale/
2. die Chrome-Entwickler-Fenster Bring it up (pop-out, so ist es eine unabhängige Fenster) und aktivieren Sie die Option "Show FPS meter".
3. Größe das Fenster klein, so dass es nur die Fail Wal-Demo enthält. Notiere deinen FPS.
4. Jetzt Größe das Fenster groß oder Vollbild es. Notiere deinen FPS.

Mit einem kleinen Fenster bekomme ich 55 FPS. Vollbild, ich bekomme 34 FPS. Ich würde erwarten, dass der FPS unabhängig von der Seitengröße nahezu gleich ist, da sich der animierte Bereich nicht ändert. Die FPS scheint proportional zur Anzahl der zusammengesetzten Schichten auf dem sichtbaren Bildschirm zu sein. Die Größenänderung des Fensters führt auch dazu, dass die Animation klobig ist und Frames überspringt. Wenn ich die gleiche Fenstergröße in Safari verwende, bleibt die Animation flüssig. Safari weiß, dass es nichts Neues zu rendern gibt, während Chrome scheinbar ohne Grund einen Haufen Arbeit verrichtet.

Der Grund, warum Sie eine bessere Leistung sehen, wenn Ihre dev-Konsole geöffnet ist, liegt daran, dass Ihre dev-Konsole inline/embedded mit der Seite ist, was die Seite selbst kleiner macht, wenn sie geöffnet ist. Dies führt zu einer Seite mit weniger Composite-Layern für Chrome, die zu einem besseren FPS führen. Wenn Sie Ihre Entwicklerkonsole deaktivieren, sodass es ein unabhängiges Fenster ist und keinen Einfluss auf die Seitengröße hat, wird Ihr FPS nicht davon beeinflusst, ob die Entwicklerkonsole aktiv ist oder nicht.

Dies scheint das "warum" das passiert ist. Nun, wenn jemand herausfindet was getan werden kann, wäre ich sicherlich interessiert zu wissen.