uf einer Website, an der ich arbeite, wird eine große Anzahl (> 50) komplexer SVG-Bilder in einem Bildlaufdialogfenster angezeigt. Wenn Sie die Site in Chrome anzeigen, ist die Bildlaufleistung des Dialogfelds sehr schlecht - es ist merklich verzögert und langsam. Wenn ich jedoch die SVG-Bilder durch PNG-Bilder ersetze, läuft der Bildlauf reibungslos und ansprechend ab.

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

Warum ist die SVG-Bildlaufleistung so viel schlechter als die PNG-Bildlaufleistung? Nachdem der Browser ein SVG-Bild gerendert hat, wird davon ausgegangen, dass das Bild erst wieder gerendert werden muss, wenn das Bild in irgendeiner Weise bearbeitet wurde (z. B. durch Ändern der Größe). Führt das Scrollen eines Elements, das SVG-Bilder enthält, dazu, dass die Bilder für jedes Bild der Scroll-Animation neu gerendert werden?

                                                                                          `