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

Question

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

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

所有的动画都是使用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 树？

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

Answer 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 的支持。

Answer 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;

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

Answer 3

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

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