为什么 SVG 的滚动性能比 PNG 差这么多？
Why is SVG scrolling performance so much worse than PNG?
我正在处理的网站在滚动对话框中显示大量 (>50) 复杂的 SVG 图像 window。在 Chrome 中查看站点时，对话框 window 的滚动性能非常差 - 它明显滞后且缓慢。但是，如果我用 PNG 图像替换 SVG 图像，则滚动非常流畅且响应迅速。
下面是差异的演示：https://jsfiddle.net/NathanFriend/42knwc1s/
为什么 SVG 滚动性能比 PNG 滚动性能差这么多？浏览器呈现 SVG 图像后，我认为它不需要重新呈现图像，直到以某种方式操作图像（如调整大小）。滚动包含 SVG 图像的元素是否会导致为滚动动画的每一帧重新渲染图像？
`
我认为这只是某种 Chromium 错误，我在 SO 上发现了这个问题，因为我在 Mac 上也开始遇到它。例如，它在 Opera 上运行良好。
如果这真的是一个错误，我认为这里没有人能够解释为什么它很慢。我创建了一个 Chromium 错误，如果您希望问题尽快得到解决或了解更多信息，请给它加注星标 https://bugs.chromium.org/p/chromium/issues/detail?id=681611
我正在处理的网站在滚动对话框中显示大量 (>50) 复杂的 SVG 图像 window。在 Chrome 中查看站点时，对话框 window 的滚动性能非常差 - 它明显滞后且缓慢。但是，如果我用 PNG 图像替换 SVG 图像，则滚动非常流畅且响应迅速。
下面是差异的演示：https://jsfiddle.net/NathanFriend/42knwc1s/
为什么 SVG 滚动性能比 PNG 滚动性能差这么多？浏览器呈现 SVG 图像后，我认为它不需要重新呈现图像，直到以某种方式操作图像（如调整大小）。滚动包含 SVG 图像的元素是否会导致为滚动动画的每一帧重新渲染图像？
`
我认为这只是某种 Chromium 错误，我在 SO 上发现了这个问题，因为我在 Mac 上也开始遇到它。例如，它在 Opera 上运行良好。
如果这真的是一个错误，我认为这里没有人能够解释为什么它很慢。我创建了一个 Chromium 错误，如果您希望问题尽快得到解决或了解更多信息，请给它加注星标 https://bugs.chromium.org/p/chromium/issues/detail?id=681611