html - 如何对 CSS3 硬件加速 translate3d 进行基准测试，我应该将其应用于 body 元素吗？

Question

我遇到了 this question关于 transform: translate3d(0,0,0) 或 transform: translateZ(0)，以及它们如何为某些/大多数平台上的动画启用 CSS3 硬件加速以及浏览器，尤其是与 -webkit-backface-visibility: hidden 和 -webkit-perspective: 1000 结合使用时。

但是，当我阅读有关该主题的内容时，这些问题在我脑海中形成:

1. 如何确定添加 transform: translate3d(0,0,0) 是否真的能让我的机器上的动画更流畅？还是只是一种感知？
2. 我应该在哪里添加 transform: translate3d(0,0,0) CSS 以使其尽可能有效？对于 body 元素，还是比专门用转换标记动画元素慢？

如果第一个问题得到回答，我就能自己回答第二个问题。那么我将如何着手对动画平滑度进行基准测试？

Answer 1

Web 上的硬件加速有些是主观的。

仅仅因为您已经说服浏览器使用硬件加速并不意味着它实际上会提高感知性能。

1. 您的 GPU 无法解决由于强制浏览器重新绘制/重绘窗口的重要部分而导致的断断续续的动画。所以你需要明白什么是causes a browser to repaint .一般来说，opacity 和 transform 等复合属性是最好的。
2. 人眼可以逼真地感知高达 150fps 左右的帧速率。但是，2019 年的平均计算机显示器通常在 60Hz 左右，相当于 60fps。基本上，你需要一个高端游戏显示器来真正测试人类的感知。综上所述，在已经高性能的动画上使用 GPU 获得小幅 FPS 增加几乎没有值(value)。

基准动画

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

性能标签。您必须让它开始记录，然后它会在某个时间点或平均值显示为与“帧”标签水平的条形图。它还将向您显示特定复合 Material 花费了多长时间。

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

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

渲染细节 最后，您可以通过打开也在“更多工具”菜单中找到的“渲染”面板来添加实时 FPS 计数器和重绘可视化。这会将叠加层添加到实际的浏览器窗口，以便您可以跟踪更改内容时发生的情况。