css - 高性能的 CSS3 动画(简单的动画在 Chrome 开发者工具中仍然没有表现)

Question

我正在努力寻找一种方法来使 CSS 页面转换在谷歌浏览器中表现良好。

在时间轴上的 Chrome 开发人员工具中，我注意到一些红色标记，它们都表示相同的内容:长帧时间表示卡顿和渲染性能不佳。在有关渲染性能的 Web 基础指南中阅读更多内容。

在我正在开发的应用程序上，这似乎是合法的，我试图调查，但找不到来源。

我做了一个更简单的演示，但我仍然得到红色标记:http://codepen.io/anything/full/qOOpza/

.page {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#ccc;
  &--1 {
    background:green;
  }
  &--2 {
    background: yellow;
  }
  &.moveToRight {
        animation: moveToRight ease .5s;
        animation-fill-mode: forwards;
    }

    &.moveToLeft {
        animation: moveToLeft ease .5s;
        animation-fill-mode: forwards;
    }
}


@keyframes moveToRight {
    from { }
    to { transform: translateX(100%); }
}

@keyframes moveToLeft {
    from { }
    to { transform: translateX(0); }
}

Answer 1

我一直在玩 ytour 演示，我发现了 2 个问题:

首先，从 translate 更改为 translate3d 会稍微提高(至少在我的系统中)性能。所以，写这个

@keyframes moveToRight {
    from {     transform: translate3d(0%, 0px, 0px);  }
    to {     transform: translate3d(100%, 0px, 0px);  }
}

更好。 (这个之前已经说过好几次了，但是检查一下总是好的)。

另外，一个新属性应该会有所帮助。设置

将改变:变换；

应该让浏览器为将来更改此属性做好准备。但我还没有看到任何区别。

其次，Chrome 收集统计信息的方式似乎存在问题。您启用了“屏幕截图”。这似乎是延迟的主要原因，Chrome 需要时间来呈现和存储屏幕截图。

根据定义，性能工具完成其工作所需的时间不应在分析中计算。但这似乎不是这里的情况......我会说这是一个错误。

至少就我而言，更改这两个问题会使红色标记几乎消失

而且，在剩余的标记帧中，似乎没有任何性能问题。请注意，在屏幕截图中，帧持续时间为 25.57 毫秒，但 CPU 时间为 1.239 毫秒。