如何对 CSS3 硬件加速 translate3d 进行基准测试，我应该将其应用于 body 元素吗？
How to benchmark CSS3 hardware acceleration translate3d, and should I apply it to body element?
我发现 this question 关于 transform: translate3d(0,0,0) 或 transform: translateZ(0)，以及它们如何在 some/most 平台和浏览器上为动画启用 CSS3 硬件加速，尤其是与 -webkit-backface-visibility: hidden 和 -webkit-perspective: 1000.
一起使用时
然而，当我阅读该主题时，这些问题在我脑海中形成：
- 如何确定添加
transform: translate3d(0,0,0) 是否真的能让我的机器上的动画更流畅？还是只是一种感知的东西？
- 我应该在哪里添加
transform: translate3d(0,0,0) CSS 以使其尽可能有效？对于 body 元素，还是比使用转换专门标记动画元素慢？
如果第一个问题得到回答，我就能自己回答第二个问题。那么我将如何对动画平滑度进行基准测试？
网络上的硬件加速有些主观。
仅仅因为您已经说服浏览器使用 hardware-acceleration 并不意味着它实际上会提高感知性能。
- 您的 GPU 无法解决由于强制浏览器 repaint/redraw window 的重要部分而导致的断断续续的动画。所以你需要明白什么是causes a browser to repaint。一般来说，像
opacity 和 transform 这样的复合属性是最好的。
- 人眼可以逼真地感知高达 150fps 左右的帧速率。但是，2019 年的平均计算机显示器通常在 60Hz 左右，相当于 60fps。基本上，你需要一个高端游戏显示器来真正测试人类的感知。综上所述，在已经高性能的动画上使用 GPU 获得小幅 FPS 增加几乎没有价值。
基准动画
Chrome 的 Devtools 有几个有用的工具可以帮助你理解动画。我将使用 Google 的乐趣 Game of the Year 作为这些示例。
性能选项卡。您必须让它开始记录，然后它会在某个时间点或平均值显示为与“帧”标签水平的条形图。它还会显示特定复合材料花费了多长时间。
Layers 选项卡 您可以通过 select 三点图标 -> More Tools -> Layers
在 Dev tools 中访问它
打开此选项卡后，您可以select查看各个元素的绘制计数、内存使用情况以及正在使用的视觉合成类型（以及原因）。
渲染细节 最后，您可以通过打开也在“更多工具”菜单中找到的“渲染”面板来添加实时 FPS 计数器和重绘可视化。这会将叠加层添加到实际的浏览器 window 以便您可以跟踪更改内容时发生的情况。
我发现 this question 关于 transform: translate3d(0,0,0) 或 transform: translateZ(0)，以及它们如何在 some/most 平台和浏览器上为动画启用 CSS3 硬件加速，尤其是与 -webkit-backface-visibility: hidden 和 -webkit-perspective: 1000.
然而，当我阅读该主题时，这些问题在我脑海中形成：
- 如何确定添加
transform: translate3d(0,0,0)是否真的能让我的机器上的动画更流畅？还是只是一种感知的东西？ - 我应该在哪里添加
transform: translate3d(0,0,0)CSS 以使其尽可能有效？对于body元素，还是比使用转换专门标记动画元素慢？
如果第一个问题得到回答，我就能自己回答第二个问题。那么我将如何对动画平滑度进行基准测试？
网络上的硬件加速有些主观。
仅仅因为您已经说服浏览器使用 hardware-acceleration 并不意味着它实际上会提高感知性能。
- 您的 GPU 无法解决由于强制浏览器 repaint/redraw window 的重要部分而导致的断断续续的动画。所以你需要明白什么是causes a browser to repaint。一般来说，像
opacity和transform这样的复合属性是最好的。 - 人眼可以逼真地感知高达 150fps 左右的帧速率。但是，2019 年的平均计算机显示器通常在 60Hz 左右，相当于 60fps。基本上，你需要一个高端游戏显示器来真正测试人类的感知。综上所述，在已经高性能的动画上使用 GPU 获得小幅 FPS 增加几乎没有价值。
基准动画
Chrome 的 Devtools 有几个有用的工具可以帮助你理解动画。我将使用 Google 的乐趣 Game of the Year 作为这些示例。
性能选项卡。您必须让它开始记录，然后它会在某个时间点或平均值显示为与“帧”标签水平的条形图。它还会显示特定复合材料花费了多长时间。
Layers 选项卡 您可以通过 select 三点图标 -> More Tools -> Layers
在 Dev tools 中访问它打开此选项卡后，您可以select查看各个元素的绘制计数、内存使用情况以及正在使用的视觉合成类型（以及原因）。
渲染细节 最后，您可以通过打开也在“更多工具”菜单中找到的“渲染”面板来添加实时 FPS 计数器和重绘可视化。这会将叠加层添加到实际的浏览器 window 以便您可以跟踪更改内容时发生的情况。