performance - 为什么SVG滚动性能比PNG差很多？

Question

我正在工作的网站在滚动对话框窗口中显示大量(> 50)复杂的SVG图像。在Chrome中查看网站时，对话框窗口的滚动性能非常差-明显缓慢且缓慢。但是，如果我将SVG图像替换为PNG图像，则滚动将非常流畅且响应迅速。

这是区别的演示:https://jsfiddle.net/NathanFriend/42knwc1s/

为什么SVG滚动性能比PNG滚动性能差很多？浏览器渲染SVG图像后，我认为在以某种方式(例如调整大小)对图像进行操作之前，不需要重新渲染图像。滚动包含SVG图像的元素是否会导致针对滚动动画的每一帧重新渲染图像？

                                                                                          `

Answer 1

我认为这只是某种Chromium错误，我在SO上发现了此问题，因为我也在Mac上也开始遇到此问题。例如，它可以在Opera上正常工作。

我认为这里没有任何人能够解释为什么它真的很慢却为什么会很慢。我创建了一个Chromium错误，如果您希望尽快解决该问题或了解更多信息，请给它加注星标https://bugs.chromium.org/p/chromium/issues/detail?id=681611