Was ist der Geschwindigkeitsunterschied zwischen dem Zeichnen mit HTML5 Canvas und HTML und Javascript?

Question

Ich bin daran interessiert, ein Spiel mit HTML und Javascript zu machen. Ich frage mich, ob es wirklich so viel schneller ist, in HTML5 und Javascript zu zeichnen, als es mit Bildern und Divs in HTML und Javascript ist.

Beispiel eines Spiel HTML und JavaScript verwenden, das gut funktioniert: http://scrabb.ly/

Beispiel eines Spiels mit html5 und Javascript, die gut funktioniert: http://htmlchess.sourceforge.net/demo/example.html

Answer 1

Ich habe eine Reihe von Zahlen auf HTML-Drawi ausgeführt ng gegenüber Canvas-made Zeichnung. Ich könnte einen großen Beitrag über die Vorteile von jedem machen, aber ich werde einige der relevanten Ergebnisse meiner Tests für Ihre spezifische Anwendung berücksichtigen:

Ich machte Canvas und HTML-Test-Seiten, beide hatten bewegliche "Knoten". Canvas-Knoten waren Objekte, die ich in Javascript erstellt und verfolgt habe. HTML Knoten waren <div> s, obwohl sie <image> oder <video> auch sein könnte.

Ich habe 100.000 Knoten zu jedem meiner beiden Tests. Sie führten ganz anders:

Die HTML-Test Tab dauerte ewig zu Last (bei etwas weniger als 5 Minuten getaktet, Chrom der Seite zum ersten Mal zu töten, bat). Der Task-Manager von Chrome sagt, dass die Registerkarte 168 MB belegt. Es dauert 12-13% CPU-Zeit, wenn ich es ansehe, 0%, wenn ich nicht hinsehe.

Die Leinwand-Registerkarte in einer Sekunde geladen und 30MB in Anspruch nimmt. Es nimmt auch immer 13% der CPU-Zeit auf, egal ob man es betrachtet oder nicht.

Ziehen auf der HTML-Seite ist glatter, was vermutlich erwartet wird, da das aktuelle Setup ist, alles im Scan-Test alle 30 Millisekunden neu zu zeichnen. Hier gibt es viele Optimierungen für Canvas. (Canvas-Invalidation ist die einfachste, auch Clipping-Regionen, selektives Neuzeichnen, etc ..hängt nur davon ab, wie viel Sie gerne implementieren)

Video auf der HTML-Seite, während ich keine Objekte bewegen, ist eigentlich perfekt glatt.

Auf der Leinwand ist das Video immer langsam, da ich ständig neu zeichne, weil ich meine Zeichenleinwand für ungültig erklärt habe. Es gibt natürlich viel Raum für Verbesserungen.

Drawing/loading alone ist weit schneller in Canvas und hat auch viel mehr Platz für Optimierungen (dh, Dinge außerhalb des Bildschirms auszuschließen ist sehr einfach).

Answer 2

Keines dieser Spiele erfordern HTML 5.en scrabb. ly macht alles mit rechteckigen Objekten, die divs gut behandeln, und das Schachspiel verwendet nicht einmal Animationen. Wenn das die Art von Spiel ist, das Sie entwickeln möchten, dann sollte das, was Sie verwenden, aus Gründen der Vertrautheit und Kompatibilität statt der Leistung entschieden werden.

Answer 3

Schnell wie in schnellen Rendering oder ein schnellere Entwicklung? Ich würde sagen, die Antwort auf beide ist HTML5 Canvas. Obwohl es eine ziemlich neue Technologie ist und noch nicht einmal von allen Mainstream-Browsern unterstützt wird, hat es bereits viel mehr Funktionalität als Sie DIVs mit normalem HTML verwenden würden. Ich habe schon mal mit divs gezeichnet und es war unglaublich frustrierend, etwas zur Arbeit zu bringen. Mit Canvas haben Sie bereits einen Rahmen für die meisten grundlegenden Zeichnungen. Außerdem ist html5 neu. Auch wenn es momentan relativ langsam ist, um mit divs zu zeichnen (was es wahrscheinlich nicht ist), wird diese Leistung mit zunehmender Entwicklung und Akzeptanz zunehmen. Ich kann nicht dasselbe für das Zeichnen mit Divs sagen.

Pros zu HTML5 Canvas mit:

• Ähnlich wie Zeichnung Frameworks (OpenGL, DirectX)
• Wird auch weiterhin in Leistung und Funktionalität erhöhen
• Hardware in Zukunft
beschleunigt werden Mai
• Mögliche 3D-Rahmen in der Zukunft