Verwenden Sie Chrome DevTools zum Rendern von Messungen für HTML5-Grafiken
Ich möchte die Leistung zwischen Leinwand und SVG in HTML5 messen.
Ich habe es bisher getan. Ich habe mehrere Kreise in Svg und Leinwand erstellt. Beide haben eine Breite und Höhe von 500 x 500 Elementen.
Ich habe herausgefunden, dass ich die Scripting-Zeit messe. Wenn ich die Dev-Tools in Chrome verwende, entspricht die Scripting-Zeit fast meiner gemessenen Zeit. Wie kann ich die Renderzeit messen? Wäre ein Code mit separaten Canvas- und Svg-Kreis-Erstellung und Devtools für Rendering eine gute Möglichkeit, Svg und Canvas-Rendering-Leistung zu vergleichen?
%Vor% 
Irgendwie ist die Scripting-Zeit und meine gemessene Performance-Zeit anders. Kann mir jemand sagen, ob dieser Leistungsvergleich sinnvoll ist?
Ich habe den Test mehrere Male gemacht, die Performancezeit ist immer unterschiedlich, aber Canvas ist schneller als Svg beim Rendern und auch beim Scripting.
Warum beim Rendern? Scripting sollte wegen der DOM-Referenz von Svg?
seinDieser Test habe ich mit svg und canvas gemacht, ich habe zuerst nur svg gerendert, und im nächsten test nur canvas.
1 Antwort
Das Problem mit SVG.
Unten ist ein Leistungstest zum Zeichnen eines großen Kreises auf einer Leinwand und einem SVG-Bild.
Beide erhalten ungefähr die gleiche Leistung von 30 ms pro Kreis auf meinem Computer und Chrome.
Führen Sie den Test aus und sehen Sie sich das Ergebnis an. Wenn Sie den Fortschritt beobachten, bemerken Sie vielleicht, dass er etwas langsamer wird. Wenn der erste Test ausgeführt wird, klicken Sie erneut auf die Schaltfläche und dieses Mal werden Sie bemerken, dass es noch mehr verlangsamt.
Mach einen dritten Test und langsamer, aber die Leistung pro Kreis für Canvas und SVG hat sich nicht geändert, wo kommt die Verlangsamung her.
Das DOM ist kein Javascript.
Der Code-Lauf zum Hinzufügen eines Knotens zum SVG interessiert nicht, wie viele Knoten der SVG hat, aber wenn Knoten zum SVG-Bild hinzugefügt werden und Ihr Code endet, haben Sie dem DOM mitgeteilt, dass Ihr SVG-Element schmutzig ist und sein muss neu gezeichnet.
Ich habe den Test vor dem Beenden in Gruppen von ~ 10 gruppiert. Das bedeutet, dass für alle zehn hinzugefügten Kreise das DOM alle SVG-Knoten von Grund auf und außerhalb des Javascript-Kontexts neu zeichnen und Ihre Fähigkeit messen oder kontrollieren kann.
Wenn Sie zum zweiten Mal auf "Testen" klicken, hat das SVG bereits 10000 Kreise. Nach dem Hinzufügen der ersten zehn Elemente gibt das DOM glücklich 10000 + 10 Kreise wieder.
Es ist nahezu unmöglich, eine genaue Messung der SVG-Leistung zu erhalten.
Verwenden der Zeitleiste
Ich habe das Code-Snippet unten mit Timeline-Aufnahme ausgeführt. Ich habe den Test zwei Mal durchgeführt.
Die nächsten zwei Bilder zeigen die gleiche Periode. Der oberste ist zu Beginn des Tests und der nächste ist am Ende des zweiten Tests.
Ich habe die GPU-Bereiche markiert, die wahrscheinlich am Rendering des SVG beteiligt sind. Beachten Sie, wie sie von trivial zu exzessiv wechseln.
Dieses Bild zeigt einen Zyklus des Tests 10, der im zweiten Testzyklus gerendert wird. Die Code-Ausführung ist kaum sichtbar bei ~ 1ms, aber die GPU ist flat-out mit einer riesigen 175ms gewidmet, um alle SVG-Kreise wieder zu zeichnen.
Wenn Sie SVG verwenden, müssen Sie sich daran erinnern, dass das DOM, wenn Sie es ändern, alles erneut rendert. Es ist egal, ob es sichtbar ist oder nicht. Wenn Sie die Größe ändern, wird es neu gezeichnet.
Um SVG zu verwenden, müssen Sie alle Ihre Aufrufe in einen Ausführungskontext bündeln, um die beste Leistung zu erzielen.
Leinwand V SVG
Sowohl SVG als auch Canvas verwenden die GPU mit sehr ähnlichen Shadern, um die Arbeit zu erledigen. Das Zeichnen eines Kreises in SVG oder Canvas dauert ebenfalls. Der Vorteil, den die Arbeitsfläche gegenüber SVG hat, ist, dass Sie das Rendering steuern, was wann und wo. Für SVG steuern Sie nur Inhalt und haben wenig Einfluss auf das Rendern.
Tags und Links javascript css svg html5 canvas