浏览器是否优化了屏幕外无限循环CSS动画?

时间:2019-04-28 13:24:43

标签: css css-animations

浏览器中是否有针对屏幕上无限运行的CSS动画的浏览器优化(适用于文档中显示/显示的Element的无限动画,只是不在视图中某个时间)?

为了更直接地讨论,我将引用仅涉及合成的CSS动画:仅使用变换和/或不透明度。


如果我们有一个具有animation-timing-function: infinite; CSS动画如果动画元素实际上不在屏幕上/视图中,该如何处理

有一些有关动画的已知方案,与本用例无关:

  • 如果将浏览器选项卡推入后台,动画将暂停。 MDN
  • 如果将元素从文档中删除,则动画将被忽略,例如display: none;(找不到可引用的源atm);

如果该元素只是“超出滚动范围”,并且用户可以在该元素不在屏幕上的任何时间访问它:

  • 无论元素是否可见,动画是否都能正常运行并且消耗量相同?

  • 它是否可以正常运行,但是由于未涂漆,因此流程本身变得更便宜了? -会更有意义。

  • 动画是否已完全暂停? -假设不会,因为浏览器必须知道元素需要再次绘制时当前的“当前进度”。

  • 或者在满足这些条件时,是否有其他浏览器内部进程对此进行了优化?


任何记录在案的答案,或任何重定向到某些资源的信息,都可以使您对此事有所了解。


在确定是否:手动删除无限动画(对于不在屏幕上的元素)是否可以实现更好的性能时,此讨论将是有意义的。

1 个答案:

答案 0 :(得分:0)

TLDR

只要我们想要动画的属性不触发reflow/repaint,动画可以被浏览器优化,这意味着更好的性能。

off main thread animation