程序员经验分享-hwhale

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

2024-01-28

我正在开发的一个网站在滚动对话框窗口中显示大量 (>50) 复杂的 SVG 图像。在 Chrome 中查看网站时，对话框窗口的滚动性能非常差 - 明显滞后且缓慢。但是，如果我用 PNG 图像替换 SVG 图像，滚动将非常平滑且响应灵敏。

这是差异的演示：https://jsfiddle.net/NathanFriend/42knwc1s/ https://jsfiddle.net/NathanFriend/42knwc1s/

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

                                                                                          `

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

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

performance

Googlechrome

SVG

PNG

Render

为什么 SVG 滚动性能比 PNG 差这么多？ 的相关文章

  • Highcharts - 使用选定的饼图切片获得 3D 效果

    在 highcharts 中 我试图使当用户选择或将鼠标悬停在饼图的切片上时 该切片会产生沿 z 轴 朝向用户 上升的效果 我试图通过 css 设置阴影过滤器并使切片的边框更宽 填充颜色相同 来实现此目的 然而 我面临的问题是切片仍然可以位

  • Chrome 扩展程序可以相互通信吗？

    我正在编写一个Chrome扩展程序 并且想要实现一个接口或api 以便我将来制作的其他扩展程序可以使用它 最终的效果可能如下 分机 B 呼叫extensionA someMethod someParameters 并向分机A发送一些数据 分

  • 使用 # 时锚点 标签在 Chrome 中不起作用

    这是我在页面上使用的代码 li a href explore Sound Sound a li 在所有页面上出现的菜单中 a a 在我想要链接的页面上 我尝试过使用 id 将内容添加到标签中 但仅在 Chrome 中 浏览器不会向下滚动到该

  • 即使在急切加载之后，belongs_to 关联也会单独加载

    我有以下关联 class Picture lt ActiveRecord Base belongs to user end class User lt ActiveRecord Base has many pictures end 在我的

  • 最新版 Firefox for Android 36.0 不支持应用深度链接

    我有一个 android 应用程序 在其中定义了意图过滤器来处理对我的网站的任何 http 请求 以在我构建的应用程序中打开 在 Chrome 上 我收到在应用程序中打开的提示 但在 Firefox 上却没有 这在 Firefox 上还没有

  • 海量矢量资源导入Android Studio

    有没有办法将许多矢量 svg 图像导入到项目中 导入 30 多个图标有点无聊而且相当愚蠢 Android Studio 使用哪个脚本来转换 svgs 现在 Android Studio 中可以实现这一点 在左侧的资源管理器中 效果很好

  • css 适用于 Firefox/Chrome，但不适用于 IE

    我有这个 HTML 和 css 在 chrome firefox 中工作正常 但在 IE 上 标题布局超出了位置 并且悬停时未显示子菜单 您能帮忙吗

  • Chrome 浏览器不显示 HTTP 处理程序生成的图像

    基本上我有一个网站 可以呈现一些文档 主要是办公室 的 HTML 预览 生成的 HTML 片段包含在同一网站返回的页面中 但图像由 HTTP 处理程序从具有以下链接的另一个网站返回 img width 50 height 50 src ht

  • 为 iOS 应用程序加载基于 SVG 的图像资源

    我从 thenounproject 购买了一个图标作为 SVG 图像 然后我使用一个名为的 macOS 程序Gapplin http gapplin wolfrosch com 将此 SVG 导出为 PNG 图像 它显示为 100x100

  • 滚动时输入自动完成位置错误（chrome）

    我在输入文本的默认自动完成功能方面遇到了一些麻烦 滚动时它不会相应移动 我希望自动完成文本保留在输入的正下方 有办法做到这一点吗 我在 Chrome 浏览器版本 57 0 2987 133 中发生这种情况 fiddle https jsfi

  • 适用于 .NET 2.0 的更精确的 PNG 库？

    是的 我正在使用 C 2 0 需要对 PNG 文件执行操作 例如使用自定义调色板 但我不知道如何使用 System Drawing 是否有第 3 方库 最好是兼容 GPL 的 可以对 PNG 编码进行更精细的控制 Update 我想做的事情

  • Pandas dataframe：每批行的操作

    我有一个熊猫数据框df我想计算每批行的一些统计信息 例如 假设我有一个batch size 200000 对于每批batch sizerows 我想要一列的唯一值的数量ID我的数据框 我怎样才能做这样的事情呢 这是我想要的一个例子 prin

  • 知道 HTTP 请求是否来自 Chrome URL 自动完成功能？

    我们有一个网络应用程序可以响应GET logout并删除您的会话cookie 如果您开始输入以 l进入地址栏 Chrome 会自动建议 logout 当它这样做时 它会发出请求 logout预取内容 结果是用户意外注销 我的 HTTP 服务

  • 迭代列表的奇怪速度差异

    我创建了两个重复两个不同值的长列表 在第一个列表中 值交替出现 在第二个列表中 一个值出现在另一个值之前 a1 object object 10 6 a2 a1 2 a1 1 2 然后我迭代它们 不对它们执行任何操作 for in a1 p

  • 为什么 Web Worker 性能在 30 秒后急剧下降？

    我正在尝试提高在网络工作人员中执行时脚本的性能 它旨在解析浏览器中的大型文本文件而不会崩溃 一切都运行得很好 但我注意到使用网络工作者时大文件的性能存在严重差异 于是我做了一个简单的实验 我在同一输入上运行脚本两次 第一次运行在页面的主线程

  • 哪些属性有助于运行时 .Net 性能？

    我正在寻找可用于通过向加载器 JIT 编译器或 ngen 提供提示来确保 Net 应用程序获得最佳运行时性能的属性 例如我们有可调试属性 http msdn microsoft com en us library k2wxda47 aspx

  • 获取特定选项卡的 URL？

    在 Google Chrome 中 如何获取特定选项卡上显示的页面的 URL 这取决于你如何定义特定选项卡 有许多功能可以获取选项卡 从而返回一个选项卡选项卡对象 http code google com chrome extensions

  • R、Rcpp 与 Armadillo 中矩阵 rowSums() 与 colSums() 的效率

    背景 来自 R 编程 我正在扩展到 C C 形式的编译代码Rcpp 作为循环交换 以及一般的 C C 效果的实践练习 我实现了 R 的等效项rowSums and colSums 矩阵的函数Rcpp 我知道它们以 Rcpp 糖的形式存在 并

  • 为什么在展开的 ADD 循环内重新初始化寄存器会使其运行速度更快，即使循环内有更多指令？

    我有以下代码 include

  • d3.event.translate 在触摸设备的缩放上包含 NaN

    我使用 d3 为我的 svg 编写了一个自定义缩放函数 如下所示 Zoom behavior function myzoom xpos d3 event translate 0 ypos d3 event translate 1 vis a

随机推荐

  • ZipException：重复条目：com/google/android/gms/internal/zzbtt.class

    错误 任务 app transformClassesWithJarMergingForDebug 执行失败 com android build api transform TransformException java util zip Z

  • ol/ul 应该在

    内部还是外部？

    这两者之间哪个符合标准 p Text text text p ol li First element li ol p Other text text p OR p Text text text p ol li First element l

  • 在 MySQL 插入语句中使用 Python 变量

    我已经尝试了一段时间了 在网上查了一下 但无法弄清楚 变量是numbers and animals sql INSERT INTO favourite number info VALUES numbers animals cursor ex

  • 在 MVC Core 应用程序中使用 AddAzureADB2C 时向 ClaimsPrincipal 添加自定义声明

    使用 azure AzureADB2C 进行身份验证时 我想将在门户中管理的自定义声明添加到声明原则 current code in start up services AddAuthentication AzureADB2CDefault

  • 一次读取时按长度对文件中的所有单词进行排序。 （爪哇）

    我的数据结构课的作业是找到从一个单词到另一个单词的最短路径 即开始 流血 gt 混合 gt 金发 gt 结束 血液 成本为 3 我得到了一个单词列表 我必须使用地图对其进行分组 在哪里 键 单词的长度 值 具有该长度的所有单词的集合 我已经

  • “双重”分配——应该避免吗？

    考虑一下你有一些像这样的表达 i j 0 假设这是在您选择的语言中明确定义的 通常将其分成两个表达式会更好吗 i 0 j 0 我有时会在库代码中看到这一点 就简洁性而言 它似乎并没有给您带来太多好处 并且不应该比这两个语句执行得更好 尽管这

  • Hazelcast 中基于时间的驱逐

    我正在满足一个要求 即我有 N 个 hazelcast 实例在集群中运行 并且 kafka 消费者在所有实例上运行 现在的问题是 kafka 上传入的每条消息都应添加到分布式映射中 并且必须每 20 秒驱逐该条目 这是我通过在映射中结合使用

  • Lint-staged 找不到与 glob 匹配的暂存文件

    我正在使用 NodeJS Typescript 我想设置lint staged在提交之前验证我的文件 但它不起作用 我从指南中添加如下 husky hooks pre commit lint staged lint staged js js

  • 如何将数组中的值复制到新数组中？

    我已经断断续续地尝试解决这个问题一个星期了 但我不断遇到问题 我的目标 编写一个为整数数组分配内存的函数 该函数将整数指针 数组大小和要分配的 newSize 作为参数 该函数返回一个指向分配的缓冲区的指针 第一次调用该函数时 大小将为零并

  • 获取与 XEP-0313 每次对话的最后一条消息？

    我正在使用一个 XMPP 服务器来实现XEP 0313 http xmpp org extensions xep 0313 html用于检索对话历史记录 我只想获取每个对话的最后一条消息 以便我可以构建您最近的对话列表 预览最后一条消息 我

  • CALL 命令与带 /WAIT 选项的 START 命令

    带有 WAIT 选项的 START 命令如何 START wait notepad exe START wait notepad exe 与使用 CALL 命令有什么不同吗 CALL notepad exe CALL notepad exe

  • 在 32 位 .NET 进程中分配超过 1,000 MB 的内存

    我想知道为什么我无法在 32 位 NET 进程中分配超过 1 000 MB 的内存 以下迷你应用程序在分配 1 000 MB 后抛出 OutOfMemoryException 为什么是 1 000 MB 而不是 1 8 GB 是否有我可以更

  • Java 中 JTable 的 JDBC TableModel？

    我想将数据库表显示为 JTable 我以前从未使用过 JTable 所以我用 google 搜索了 JTable 和 TableModel 通过谷歌搜索 我可以编写自己的自定义 TableModel 它显示存储在中的数据 Object da

  • 如何在 android 中使用 java 8 库？

    我正在尝试在我的 android 项目中使用一个使用 java 8 的库 我无法找到一种方法来完成这项工作 我尝试过使用复古 lambda 但没有帮助 我不断收到错误 com android dx cf iface ParseExcepti

  • acosf() 返回 NaN

    我有一个用 Objective C 编写的 iPhone 应用程序 我在其中收集用户在屏幕上绘制的触摸点以创建路径 我希望能够精简这些数据 我的目标之一是检查点的角度是否超过某个阈值 例如 如果我在名为 a b c 的线上取任意三个相邻点

  • AngularJS 路由参数可以包含任意字符

    我是 AngularJS 的新手 所以如果这是显而易见的 请原谅我 但我正在寻找可以回答这个棘手问题的人 我正在实现一个应用程序 需要将一些参数传递到特定视图以显示有关书籍的详细信息 基本上我希望能够使用以下路由表达式 bookApp co

  • 我想知道缩放和轨道运行出了什么问题

    我希望能够平移 缩放和绕立方体旋转 我想知道为什么立方体在屏幕上显示为完全缩放 以至于我必须向后移动才能查看整个立方体 我还想将缩放控件更改为 Alt 和鼠标右键以进行缩放和轨道旋转 但我无法让它工作 任何援助将不胜感激 header in

  • 无法将数据类型 nvarchar 转换为 float 时出错

    我搜索了这个很棒的论坛并用谷歌搜索 但无法解决这个问题 我们有两张桌子 相信我 我与这些桌子无关 两个表都有一个名为eventId 然而 在一张表中 数据类型为eventId is float在另一个表中 它是nvarchar 我们正在选择

  • VBA 尝试和捕获 (MS Outlook)

    我使用以下函数来监视公共 Outlook 文件夹是否有新电子邮件到达 Public Sub Application Startup Set NewMail Application GetNamespace MAPI Folders 3 Fo

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

    我正在开发的一个网站在滚动对话框窗口中显示大量 gt 50 复杂的 SVG 图像 在 Chrome 中查看网站时 对话框窗口的滚动性能非常差 明显滞后且缓慢 但是 如果我用 PNG 图像替换 SVG 图像 滚动将非常平滑且响应灵敏 这是差异

热门标签