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

标签 performance google-chrome svg png render

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

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

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

                                                                                          `

最佳答案

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

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

关于performance - 为什么SVG滚动性能比PNG差很多?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34824098/

相关文章:

javascript - 通过将数字打包到 Javascript(Typescript)结构的数组中,我可以获得什么好处吗?

css - 尝试使用内在大小值填充内容,但 chrome 不接受它

javascript - 如何使用 CSS 或 JS 让一些文本输入在输入中显示帮助图标?

javascript - 在 javascript 中设置时,svg 文本实体会被转义

performance - 有没有办法通过 Hadoop 集群进行分布式文件下载?

java - Android Base64编码

performance - 使用 SSL 避免登陆页面重定向

IE 9/OF/Chrome Javascript/JQuery 浏览器测试框架

javascript - 检查元素的 scrollHeight 有时会返回 0

svg - 如何应用 SVG 滤镜来创建整个轮廓的彩色 SVG 形式?