Html5 Leinwand „Verbundschichten“ verursachen langen Rahmen

Question

ich einen Javascript-Client, der auf einer Webseite ausgeführt wird, mit request Zeichnung auf die Leinwand und die Kommunikation über WebSockets meinen NodeJS Backend-Server (mit dem Modul ‚ws‘ auf der Serverseite).

Profiling mit Chrome DevTools, scheint es, dass die kombinierte Zeit für das Scripting, Rendering, & Zeichnen jedes Frame nur maximal einige Millisekunden dauert. Dennoch gibt es immer noch jank - lange Frames von 20 - 40ms.

Die Zeitleiste zeigt, dass es in fast allen diesen Fällen ist eine „Antwort“, die die Länge des Rahmens und/oder ein „Verbundschichten“ überschreitet, die zu gegen Ende auftritt.

Dies ist im Wesentlichen, wie ich bin mit request:

function drawGame() { 

    // Drawing to gameCanvas from cacheCanvas 
    // cacheCanvas is updated whenever an update is received from the server 

    ctx.drawImage(cacheCanvas, 
     // source rectangle 
     0, 0, 
     gameCanvas.width*2, gameCanvas.height*2, 

     // destination 
     100, 100, 
     gameCanvas.width*2, gameCanvas.height*2 
    ); 

    requestAnimationFrame(drawGame); 
} 

requestAnimationFrame(drawGame); 

Der Server Updates mit setInterval() bei 60 Hz sendet. Wenn eine Nachricht vom Server empfangen wird, zeichnet der Client sie sofort. Ich vermute, dass dieses Timing in Verbindung mit requestAnimationFrame falsch ist und zu den Composite-Layern am Ende des Frames führt.

Trotzdem bin ich verwirrt, warum es so viel Leerlaufzeit zwischen Scripting und "Composite-Ebenen" für jeden Frame gibt. So ...

• Gibt es eine Möglichkeit zu steuern, wenn „Verbundschichten“ genannt wird?

• Sollte ich die Daten aus jeder Update-Nachricht speichern und nur am Anfang des nächsten Animationsrahmens zeichnen?

• Worauf bezieht sich die "Antwort"?

Vielen Dank!

Answer 1

Die Chrome-Version, die Rendering-Optionen und die Grafiktreiber können dies alles beeinflussen. Veröffentlichen Sie diese Informationen mit Ihrer Frage. Versuchen Sie auch, auf der Chromium-Bug-Liste zu suchen.

Sie können auch die neueste Entwicklung von Firefox versuchen, die eine bessere Leistung durch die Verwendung mehrerer Prozesse haben soll.

Um festzustellen, ob Serverantworten usw. etwas mit der Leistung zu tun haben, entfernen Sie sie und verwenden Sie nur gefälschte Daten vom Client als Test.