网络上的硬件加速是 有点 主观的。

只是因为你说服了浏览器 hardware-acceleration

1. 您的GPU无法解决由于强制浏览器重新绘制/重绘窗口的重要部分而导致的不稳定动画。所以你要明白 causes a browser to repaint . 一般来说,复合特性 opacity 和 transform 是最好的。
2. 人眼可以真实地感知高达150帧/秒的帧速率。但是,2019年电脑平均显示频率通常在60Hz左右,相当于60fps。基本上,你需要一个高端的游戏监视器来测试人类的感知能力。所有这些都说明,在一个已经高性能的动画上,用GPU获得一个小的FPS增加是没有价值的。

基准动画

Chrome的Devtools有几个有用的工具来帮助您理解动画。我要用谷歌的乐趣 Game of the Year 对于这些例子。

. 你必须让这个开始录制,然后它会显示你在一个时间点或平均值作为一个酒吧水平的“帧”标签。它还将显示一个特定的合成需要多长时间。

“图层”选项卡 通过选择三点图标->更多工具->层,可以在开发工具中访问此项

打开此选项卡后,可以选择单个元素以查看绘制计数、内存使用情况以及正在使用的视觉合成类型(以及原因)。

最后,通过打开“更多工具”菜单中的“渲染”面板,可以添加实时FPS计数器并重新绘制可视化效果。这将向实际的浏览器窗口添加覆盖,以便您可以跟踪更改时发生的情况。