Was ist der beste Ansatz, um Elemente im laufenden Betrieb zu erstellen und sie bewegen zu können? Angenommen, ich möchte ein Rechteck, einen Kreis und ein Polygon erstellen und dann diese Objekte auswählen und verschieben.
Ich verstehe, dass HTML5 drei Elemente bietet, die dies ermöglichen können: svg , canvas und div . Für was ich tun möchte, welches dieser Elemente bietet die beste Leistung?
Um diese Ansätze zu vergleichen, habe ich mir überlegt, drei visuell identische Webseiten zu erstellen, die jeweils eine Kopf-, Fuß-, Widget- und Textinhalt enthalten. Das Widget auf der ersten Seite wird vollständig mit dem canvas
Element erstellt, das zweite vollständig mit dem svg
Element und das dritte vollständig mit dem einfachen div
Element HTML und CSS.
quelle
Antworten:
Die kurze Antwort:
SVG wäre für Sie einfacher , da die Auswahl und das Verschieben bereits integriert sind. SVG-Objekte sind DOM-Objekte, daher verfügen sie über "Klick" -Handler usw.
DIVs sind in Ordnung, aber klobig und haben eine schreckliche Leistungsbelastung bei großen Zahlen.
Canvas bietet zweifellos die beste Leistung, Sie müssen jedoch alle Konzepte des verwalteten Status (Objektauswahl usw.) selbst implementieren oder eine Bibliothek verwenden.
Die lange Antwort:
HTML5 Canvas ist einfach eine Zeichenfläche für eine Bitmap. Sie haben sich eingerichtet, um zu zeichnen (z. B. mit Farbe und Linienstärke), das Ding zu zeichnen, und dann hat die Leinwand keine Kenntnis von diesem Ding: Es weiß nicht, wo es ist oder was es ist, das Sie gerade gezeichnet haben, es ist nur Pixel. Wenn Sie Rechtecke zeichnen und sie verschieben oder auswählbar sein möchten, müssen Sie all dies von Grund auf neu codieren, einschließlich des Codes, um sich daran zu erinnern, dass Sie sie gezeichnet haben.
SVG hingegen muss Verweise auf jedes Objekt enthalten, das es rendert. Jedes von Ihnen erstellte SVG / VML-Element ist ein echtes Element im DOM. Standardmäßig können Sie die von Ihnen erstellten Elemente viel besser verfolgen und den Umgang mit Mausereignissen standardmäßig vereinfachen. Bei einer großen Anzahl von Objekten wird dies jedoch erheblich verlangsamt
Diese SVG-DOM-Referenzen bedeuten, dass ein Teil der Arbeit im Umgang mit den von Ihnen gezeichneten Dingen für Sie erledigt wird. Und SVG ist schneller beim Rendern wirklich großer Objekte, aber langsamer beim Rendern vieler Objekte.
Ein Spiel wäre in Canvas wahrscheinlich schneller. Ein riesiges Kartenprogramm wäre in SVG wahrscheinlich schneller. Wenn Sie Canvas verwenden möchten, habe ich einige Tutorials, um bewegliche Objekte hier zum Laufen zu bringen .
Canvas ist besser für schnellere Dinge und umfangreiche Bitmap-Manipulationen (wie Animationen) geeignet, benötigt jedoch mehr Code, wenn Sie viel Interaktivität wünschen.
Ich habe eine Reihe von Zahlen für von HTML DIV erstellte Zeichnungen im Vergleich zu von Canvas erstellten Zeichnungen ausgeführt. Ich könnte einen großen Beitrag über die Vorteile der einzelnen Tests verfassen, aber ich werde einige der relevanten Ergebnisse meiner Tests angeben, die für Ihre spezifische Anwendung zu berücksichtigen sind:
Ich habe Canvas- und HTML-DIV-Testseiten erstellt, beide hatten bewegliche "Knoten". Canvas-Knoten waren Objekte, die ich in Javascript erstellt und verfolgt habe. HTML-Knoten waren bewegliche Divs.
Ich habe jedem meiner beiden Tests 100.000 Knoten hinzugefügt. Sie haben ganz anders gespielt:
Das Laden der Registerkarte "HTML-Test" hat ewig gedauert (etwas weniger als 5 Minuten, Chrome hat darum gebeten, die Seite beim ersten Mal zu beenden). Der Task-Manager von Chrome gibt an, dass die Registerkarte 168 MB belegt. Es nimmt 12-13% CPU-Zeit in Anspruch, wenn ich es betrachte, 0%, wenn ich es nicht betrachte.
Die Registerkarte Canvas wird in einer Sekunde geladen und nimmt 30 MB ein. Außerdem nimmt es die ganze Zeit 13% der CPU-Zeit in Anspruch, unabhängig davon, ob man es sich ansieht oder nicht. (2013 bearbeiten: Sie haben das größtenteils behoben)
Das Ziehen auf der HTML-Seite ist reibungsloser, was vom Design erwartet wird, da das aktuelle Setup im Canvas-Test ALLES alle 30 Millisekunden neu zeichnet. Dafür gibt es für Canvas zahlreiche Optimierungen. (Die Ungültigmachung der Zeichenfläche ist am einfachsten, auch das Ausschneiden von Regionen, das selektive Neuzeichnen usw. hängt nur davon ab, wie sehr Sie sich für die Implementierung interessieren.)
Es besteht kein Zweifel, dass Canvas bei der Objektmanipulation schneller sein kann als die Divs in diesem einfachen Test und natürlich viel schneller in der Ladezeit. Das Zeichnen / Laden ist in Canvas schneller und bietet auch viel mehr Raum für Optimierungen (dh das Ausschließen von Dingen außerhalb des Bildschirms ist sehr einfach).
Fazit:
quelle
background-image
... verwenden. In SVG / CanvasUm dies hinzuzufügen, habe ich eine Diagrammanwendung erstellt und zunächst mit Canvas begonnen. Das Diagramm besteht aus vielen Knoten, und sie können ziemlich groß werden. Der Benutzer kann Elemente im Diagramm verschieben.
Was ich fand, war, dass auf meinem Mac SVG für sehr große Bilder überlegen ist. Ich habe ein MacBook Pro 2013 13 "Retina, und es läuft die Geige unten ziemlich gut. Das Bild ist 6000x6000 Pixel groß und hat 1000 Objekte. Eine ähnliche Konstruktion auf Leinwand war für mich unmöglich zu animieren, als der Benutzer Objekte in der Retina herumzog Diagramm.
Auf modernen Displays müssen Sie auch unterschiedliche Auflösungen berücksichtigen, und hier bietet Ihnen SVG all dies kostenlos an.
Geige: http://jsfiddle.net/knutsi/PUcr8/16/
Vollbild: http://jsfiddle.net/knutsi/PUcr8/16/embedded/result/
quelle
Die Unterschiede zwischen SVG und Canvas zu kennen, wäre hilfreich bei der Auswahl des richtigen.
Segeltuch
SVG
quelle
Ich stimme den Schlussfolgerungen von Simon Sarris zu:
Ich habe einige Visualisierungen in Protovis (SVG) mit Processingjs (Canvas) verglichen, die> 2000 Punkte anzeigen, und Processingjs ist viel schneller als Protovis.
Das Behandeln von Ereignissen mit SVG ist natürlich viel einfacher, da Sie sie an die Objekte anhängen können. In Canvas müssen Sie dies manuell tun (Mausposition überprüfen usw.), aber für eine einfache Interaktion sollte es nicht schwierig sein.
Es gibt auch die Bibliothek dojo.gfx des Dojo-Toolkits. Es bietet eine Abstraktionsschicht und Sie können den Renderer angeben (SVG, Canvas, Silverlight). Das könnte auch eine praktikable Wahl sein, obwohl ich nicht weiß, wie viel Overhead die zusätzliche Abstraktionsschicht hinzufügt, aber es erleichtert das Codieren von Interaktionen und Animationen und ist rendererunabhängig.
Hier einige interessante Benchmarks:
quelle
Nur meine 2 Cent bezüglich der Divs Option.
Famous / Infamous und SamsaraJS (und möglicherweise andere) verwenden absolut positionierte nicht verschachtelte Divs (mit nicht trivialem HTML / CSS-Inhalt), kombiniert mit Matrix2d / Matrix3d für die Positionierung und 2D / 3D-Transformationen, und erzielen auf moderater mobiler Hardware stabile 60 FPS Also würde ich dagegen argumentieren, dass Divs eine langsame Option sind.
Auf Youtube und anderswo gibt es zahlreiche Bildschirmaufnahmen von hochleistungsfähigen 2D / 3D-Inhalten, die im Browser ausgeführt werden. Alles ist ein DOM-Element, auf dem Sie das Element mit 60 FPS überprüfen können (gemischt mit WebGL für bestimmte Effekte, jedoch nicht für das Hauptteil des Renderings).
quelle
Obwohl die meisten der oben genannten Antworten immer noch zutreffend sind, denke ich, dass sie ein Update verdienen:
Im Laufe der Jahre hat sich die Leistung von SVG erheblich verbessert, und jetzt gibt es hardwarebeschleunigte CSS-Übergänge und -Animationen für SVG , die überhaupt nicht von der JavaScript-Leistung abhängen. Natürlich hat sich auch die JavaScript-Leistung und damit die Leistung von Canvas verbessert, aber nicht so sehr, wie SVG verbessert wurde. Außerdem gibt es ein "neues Kind" auf dem Block, das heutzutage in fast allen Browsern verfügbar ist, und das ist WebGL . Um die gleichen Wörter zu verwenden, die Simon oben verwendet hat: Es schlägt sowohl Canvas als auch SVG zweifellos. Dies bedeutet jedoch nicht, dass es sich um die Go-to-Technologie handeln sollte, da es ein Biest ist, mit dem man arbeiten kann, und es ist nur in ganz bestimmten Anwendungsfällen schneller.
Meiner Meinung nach bietet SVG für die meisten Anwendungsfälle heute das beste Verhältnis von Leistung zu Benutzerfreundlichkeit. Visualisierungen müssen sehr komplex (in Bezug auf die Anzahl der Elemente) und gleichzeitig sehr einfach (pro Element) sein, damit Canvas und noch mehr WebGL wirklich glänzen.
In dieser Antwort auf eine ähnliche Frage gebe ich weitere Details an, warum ich denke, dass die Kombination aller drei Technologien manchmal die beste Option ist, die Sie haben.
quelle
layers.acceleration.force-enabled
In Firefox geht es nicht um Videodecodierung. Es ist eine bekannte Tatsache. Wenn fertig, sind Schleifen mit requestAnimationFrame eine andere Ebene, die viel mehr Neuanstriche ermöglicht. Über Video überhaupt nicht.Für Ihre Zwecke empfehle ich die Verwendung von SVG, da DOM-Ereignisse wie Maushandhabung, einschließlich Drag & Drop, enthalten sind, Sie kein eigenes Neuzeichnen implementieren müssen und den Status von nicht verfolgen müssen Ihre Objekte. Verwenden Sie Canvas, wenn Sie Bitmap-Bilder bearbeiten müssen, und verwenden Sie ein reguläres div, wenn Sie in HTML erstellte Inhalte bearbeiten möchten. In Bezug auf die Leistung werden Sie feststellen, dass moderne Browser jetzt alle drei beschleunigen, aber dass die Leinwand bisher die größte Aufmerksamkeit erhalten hat. Auf der anderen Seite ist es entscheidend, wie gut Sie Ihr Javascript schreiben, um die bestmögliche Leistung mit Canvas zu erzielen. Daher würde ich weiterhin die Verwendung von SVG empfehlen.
quelle
Während des Googelns finde ich eine gute Erklärung zur Verwendung und Komprimierung von SVG und Canvas unter http://teropa.info/blog/2016/12/12/graphics-in-angular-2.html
Ich hoffe es hilft:
quelle