performance - 浏览器是否仍然为不可见的内容制作动画？

Question

如果页面包含折叠下方的 CSS3 动画，或者在用户向下滚动时隐藏，您是否应该使用 Javascript 应用类来停止动画，或者浏览器是否不为不可见元素设置动画？

Answer 1

即使浏览器不会绘制视口(viewport)之外的元素，我仍然很确定它们会继续更新由 css 动画确定的 css 属性，即使元素不可见.

为了能够监听动画事件，或者能够在任何给定时间读取动画 css 属性的值，这是必需的。

因此，理论上您可以通过删除为元素设置动画的 css 类来提高性能，但除非您有非常复杂的动画或为数百个元素设置动画，否则我不会真正担心它。

“绘图”通常是最昂贵的部分，特别是如果您正在为诸如颜色之类的东西设置动画，这会导致重绘。但是，如果您使用 css 变换为平移或旋转设置动画，浏览器通常不需要重新绘制每一帧。相反，它可以只绘制一次元素并将其作为纹理发送到 GPU，让 GPU 在每一帧平移或旋转它，这非常快，因为它都是硬件加速的。