Warum ist SVG-Scroll-Leistung so viel schlechter als PNG?

Question

Eine Site, an der ich gerade arbeite, zeigt eine große Anzahl (> 50) komplexer SVG-Bilder in einem Scroll-Dialogfenster an. Beim Anzeigen der Website in Chrome ist die Bildlaufleistung des Dialogfelds sehr schlecht - es ist deutlich verzögert und langsam. Wenn ich jedoch die SVG-Bilder durch PNG-Bilder ersetze, ist das Scrollen vollkommen reibungslos und reaktionsschnell.

Hier ist eine Demonstration des Unterschiedes: https://jsfiddle.net/NathanFriend/42knwc1s/

Warum ist die SVG-Performance-Scrolling Leistung so viel schlimmer als die PNG Scrollen? Nachdem der Browser ein SVG-Bild gerendert hat, würde ich annehmen, dass das Bild nicht erneut gerendert werden muss, bis das Bild auf irgendeine Weise manipuliert wurde (z. B. Größenänderung). Führt das Scrollen eines Elements, das SVG-Bilder enthält, dazu, dass die Bilder für jedes Bild der Bildlaufanimation neu gerendert werden?

                      ` 

Answer 1

Ich denke, das ist nur eine Art von Chromium bug ist, ich habe auf SO dieses Problem gefunden, weil ich es auch auf dem Mac gestartet erleben. Es funktioniert zum Beispiel bei Opera OK.

Ich glaube nicht, dass jemand hier erklären kann, warum es langsam ist, wenn es wirklich ein Fehler ist. Ich habe einen Chromium-Fehler erstellt. Wenn Sie möchten, dass das Problem bald behoben wird, erfahren Sie mehr. https://bugs.chromium.org/p/chromium/issues/detail?id=681611