我不敢相信。我一直以来都坚信，更少的元素会产生更好的帧率，所以我坚信如果将多个元素包装到一个<img>中，那么结果会更好。
我做了一个快速基准测试，这是我的最后笔记。重要的不是帧数本身，而是它们之间的比率。
// 1900 x10 parent elements (children are circles with simple fill), animation of 1 parent,
// 24(ObjectURL)/48/filled(ObjectURL) children in a parent, minimum fps, '?' = plain eye measurement,
// every browser except IE Desktop produces glitches, i am trying to ignore them
// DESKTOP (Win7) | DESKTOP (Win10) | MOBILE (Win8.1) | MOBILE (Win10)
// IE Firefox ? Chrome ? Yandex ? | Edge ? | IE ? | Edge ?
// HTML 50/10 21/21 23/17 25/18 | 18/7 | 13/5 | 6/3
// SVG 50/25 30/23 27/19 30/16 | 18/18 | 26/17 | 18/10
// PNG 150/150/150 29(29)/25/23(23) 21/19/22 5(5)/3/18(18) | 18(18)//18(18) | 30(30)//22(22) | 18(10)//22(20)
所以我有一个问题：从理论上讲，使用png代替html是更好的解决方案吗？也就是说，它会在整个浏览器中显示出更好的性能吗？
另外：
由于我无权使用android和ios系统，因此您可以发布以下各项的基准测试结果：Edge，Safari，Android webview，Chrome android，Safari ios，三星互联网android吗？我真的很想看到其中的每个版本，尤其是移动版本。欢迎使用任何其他浏览器。
这里是测试的链接。父元素必须放大/缩小以适合全屏显示。
png x24（Object URL）/ / png filled（Object URL）
对于png x48，jsbin不允许保存大项目（嵌入Data URL）。所以我不知道如何使用base64 x48元素来实现它。
testimage的结果是1900x1000，我知道如果它更低，则渲染速度会更快。如果您认为合适，则可以从var stackedCount中增加/减少堆叠的父母数量。
谢谢
如果您不满意为什么不使用性能工具评估chrome和firefox，那是因为它们的帧速率降低了数倍。
编辑：
对于故障，我有信息。测试MSEdge（在出现故障期间）的性能（在DevTools中）表明没有任何反应。通常，它表示正在痛苦或正在计算样式，但是在出现故障时，表示什么也没有发生。痛苦之间有很小的空跨度（使用最快的绘画可以观察到最长的跨度，跨度约为绘画时间的3倍，总计45毫秒）。
需要记住的一点是，在整个屏幕上（从动画开始）渲染幻灯片时，普通浏览器（Edge除外）的fps较低，而在屏幕末尾（动画的结尾）渲染时，fps的fps较高。 ）。 Edge无关紧要，它会给出一些持久的结果（即忽略突然的毛刺和突然的毛刺停止）。 Edge有时甚至可以提供无干扰的动画（30+ fps），但是每10-20次尝试一次。那么故障可能是可以解决的吗？