为什么SVG滚动性能比PNG差得多？ [英] Why is SVG scrolling performance so much worse than PNG?

问题描述

我正在处理的网站在滚动对话框窗口中显示大量（> 50）复杂的SVG图像。在Chrome浏览器中查看网站时，对话窗口的滚动性能非常差 - 显然非常缓慢且缓慢。但是，如果我用SVG图像替换PNG图像，滚动是完全平滑和响应。

下面是一个演示区别： https://jsfiddle.net/NathanFriend/42knwc1s/

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

 `
  

解决方案 div>

我认为这只是某种Chromium bug，我发现这个问题是因为我在Mac上开始体验它。它在Opera上运行正常。

我不认为这里有人能解释为什么它真的是一个bug。我已经创建了一个Chromium错误，如果您希望问题很快得到解决或了解更多信息，请将它列出来。 https://bugs.chromium.org/p/chromium/issues/detail?id=681611

A site I'm working on displays a large number (>50) of complex SVG images in a scrolling dialog window. When viewing the site in Chrome, the scrolling performance of the dialog window is very poor - it is noticeably laggy and slow. However, if I replace the SVG images with PNG images, the scrolling is perfectly smooth and responsive.

Here's a demonstration of the difference: https://jsfiddle.net/NathanFriend/42knwc1s/

Why is the SVG scrolling performance so much worse than the PNG scrolling performance? After the browser renders an SVG image, I would assume it doesn't need to rerender the image until the image is manipulated in some way (like resizing). Does scrolling an element that contains SVG images cause the images to be rerendered for every frame of the scroll animation?

                                                                                          `

解决方案

I think this is just some kind of a Chromium bug, I've found this issue on SO, because I started experiencing it as well on Mac. It works OK on Opera for instance.

I don't think anyone here will be able to explain why it's slow if it really is a bug. I've created a Chromium bug, please star it if you want the issue to be fixed soon or learn more https://bugs.chromium.org/p/chromium/issues/detail?id=681611

这篇关于为什么SVG滚动性能比PNG差得多？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！