为什么 SVG 滚动性能比 PNG 差那么多？答案

【问题标题】：Why is SVG scrolling performance so much worse than PNG?为什么 SVG 滚动性能比 PNG 差那么多？
【发布时间】：2016-04-21 19:35:08
【问题描述】：

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

为什么 SVG 滚动性能比 PNG 滚动性能差这么多？在浏览器渲染 SVG 图像后，我会假设它不需要重新渲染图像，直到图像以某种方式被操纵（如调整大小）。滚动包含 SVG 图像的元素是否会导致滚动动画的每一帧都重新渲染图像？

【问题讨论】：

在 OS X 的 Chrome 上似乎没有太大的不同。这是 Windows Chrome 的问题吗？
我在 Windows 8.1 的 Chrome 上看到它。
我在 OSX 中看到了这个
我也有类似的问题，这不仅仅是性能不佳，它还会使 chrome 选项卡从一堆小 svg 图像中崩溃。令人难以置信的这种行为在质量控制中没有注意到
您找到解决方案了吗？我注意到它在 Chrome Android 上也是一个问题，有 5 个 SVG 图像和大约 15 个 SVG 图标。渲染非常缓慢。在阅读了这个错误后，我用 PNG 替换了所有 SVG。令人失望！

【解决方案1】：

我认为这只是某种 Chromium 错误，我在 SO 上发现了这个问题，因为我也开始在 Mac 上遇到它。例如，它在 Opera 上运行良好。

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

【讨论】：