使用 CSS3 动画确定丢帧的原因

Posted 2023-03-06

【中文标题】使用 CSS3 动画确定丢帧的原因

【英文标题】：Identifying cause of frames dropping using CSS3 animations

【发布时间】：2015-01-04 02:31:05

【问题描述】：

我正在尝试找出动画极度减速的原因。正如您所见（下图），绘制时间偶尔会出现峰值并导致帧速率降至

我不能展示这个网站，但我可以告诉你它在前端不是轻量级的，它是一个设计展示网站，所以有很多从外部动画的大图像的视口。我需要确定这是否只是他们必须处理的事情，或者是否可以采取任何措施来减少油漆时间。

所有的动画都是使用translate() 函数实现的。这组特定动画的 CSS 如下：

.page 
    height: 100%;
    position: absolute !important;

    -webkit-transform: translateY(100%);
    transform: translateY(100%);

    /**
     * Override ng-animate-block-transition on this element. Has an important declaration.
     */
    -webkit-transition: transform ease-in-out 0.5s !important;
    transition: transform ease-in-out 0.5s !important;


.page.ng-show 
    -webkit-transform: translateY(0);
    transform: translateY(0);


.animate-in-enter-complete .page-peak .page.ng-show 
    -webkit-transform: translateY(-3%);
    transform: translateY(-3%);


.animate-in-enter-complete .page-peak .page.page-next 
    -webkit-transform: translateY(95%);
    transform: translateY(95%);

这是我为这个特定动画制作的个人资料。层根是#document，我对这些工具有点陌生，但这是否意味着它正在重新绘制整个 DOM 树？

我怎样才能找出造成这种情况的原因？

【问题讨论】：

我认为如果无法看到实际情况，很难判断这里发生了什么......也许你可以重现一个显示相同问题的简单小提琴？

这是一个非常复杂的网站，我认为我无法在小提琴中重现该问题。在它发布之前，我将无法展示任何类型的演示，不过我会看看我是否可以在今天晚些时候试一试。我更多的是寻找“我该如何寻找根本原因？”。

好啊...你知道关于连续重绘模式的任何事情吗？在开发人员工具中，您有一个名为“启用连续页面重绘”的选项（在我的情况下，在“渲染”选项卡中）。如果你检查它，你现在会在右边看到一个时间图。然后显示/隐藏一些 DOM，启用/禁用一些 CSS 规则，看看重绘需要这么长时间。你有一篇很好的帖子来解释它here

只是为了测试，尝试为过渡方法提供固定值而不是百分比。知道这是否会以任何方式改变性能会很有趣

【参考方案1】：

优化只是猜测，无需查看页面，但我可以为您提供一些可能有用的想法。

CSS transform 和 opacity 属性不会触发布局或绘制。动画是由 javascript 还是 CSS 处理并不重要。一定是transform 之外的其他原因造成了它。单个 CSS 属性触发的工作的完整列表可以在 CSS Triggers 找到，您可以找到在 html5 Rocks 上创建 High Performance Animations 的完整指南。我的猜测是你可以做很多渲染树、布局和绘画优化。

使用will-change 确保浏览器知道您打算制作什么动画。 will-change 属性允许您提前通知浏览器您可能对元素进行哪些类型的更改，以便它可以在需要之前设置适当的优化。可以更快地更改和渲染元素，从而获得更流畅的体验。在您的示例中，为转换添加 will-change 如下所示：

.page 
  will-change: transform;

注意：不要在过多的元素上使用will-change，否则会适得其反。目前 Chrome、Firefox 和 Opera 支持此功能。它似乎得到了所有现代浏览器in the future 的支持。

【讨论】：

+1 建议 will-change :) 然而，鉴于当今许多用户仍在使用不理解该属性的浏览器，您也可以使用 translate3D 甚至 @987654333 在 GPU 中强制合成@.

此外，Opera 发布了对 will-change 属性的非常好的概述：dev.opera.com/articles/css-will-change-property 我想说的读物很棒；）

谢谢，我只需要一些入门指南。我完全知道很难猜测解决方案，但我不可能在沙盒中重新创建这个问题，并且该网站在另外 2-3 周内不会启动。抱歉，我现在能做的就是提供更多详细信息、屏幕截图等。

谢谢，我还没有机会进行实际测试，但您的建议提供了一些最好的建议，这正是我一直在寻找的。​​span>

【参考方案2】：

一些新的 CSS3 特性可能真的很重：

box-shadow 结合border-radius filter（灰度、模糊、对比度……） transform ...

通过启用连续重绘，您可以在禁用它时查看导致此加载的规则。见this post

如果您发现是转换导致了这种负载，那可能是因为浏览器没有使用硬件加速。您可以通过使用不会影响您的转换的 3D 渲染来强制它。这些规则之一可能会奏效：

transform: translateZ(0);
/* or */
transform: translate3d(0,0,0);
/* or */
perspective: 1000; 
backface-visibility: hidden;

如果不是，您可能会想知道导致负载的规则是否真的必不可少，从而重新考虑您的集成。

【讨论】：

谢谢，我需要几天的时间来测试和调试。我会回复你，让你知道进展如何。

【参考方案3】：

23 秒绘制一张图像有点太多了。他们不需要“处理它”，只是为了找到错误。因为存在一个错误，在代码中，在设计中（例如，一个页面中有 2337 个图像），或其他地方。

无法看到该站点，也无法通过匿名小提琴来重现其行为，甚至无法查看 HTML (!)，也无法知道图像的数量、大小等……唯一可能的答案是：

【讨论】：

我认为你看错了。绘画时间不是 23 秒，那太可笑了！绘制时间为 48.603 毫秒，问题是这种情况在很短的时间内经常发生，这会导致帧严重下降。是的，我很感激在无法看到它的情况下很难说出发生了什么，但是该站点不会再启动 2 周，我认为如果不使用 codepen 或 plunkr 重新创建整个站点，我无法制作准确的演示.

啊哈，绝对看错了 :) 千分之一毫秒，好工具！您应该尝试仅在小提琴中重现相关的轮播（或其他），否则水晶球仍然是我们最好的选择，顺便说一句：/