为什么SVG滚动性能比PNG差得多？

Question

我正在处理的网站在滚动对话框窗口中显示大量(> 50)复杂SVG图像.在Chrome中查看网站时,对话窗口的滚动性能非常差 - 显着滞后和缓慢.但是,如果我用PNG图像替换SVG图像,则滚动非常平滑且响应迅速.

以下是差异的演示:https://jsfiddle.net/NathanFriend/42knwc1s/

为什么SVG滚动性能比PNG滚动性能差得多？在浏览器呈现SVG图像之后,我认为它不需要重新渲染图像,直到以某种方式操纵图像(如调整大小).滚动包含SVG图像的元素是否会导致为滚动动画的每一帧重新渲染图像？

                                                                                          `

Answer 1

我认为这只是某种Chromium bug,我在SO上发现了这个问题,因为我开始在Mac上体验它.例如,它在Opera上运行正常.

我不认为这里的任何人都能解释为什么它真的很慢,如果它真的是一个bug.我已经创建了一个Chromium bug,如果您希望尽快修复该问题或者了解更多信息,请为其加注星标https://bugs.chromium.org/p/chromium/issues/detail?id=681611