高性能 CSS3 动画（简单的动画在 Chrome 开发者工具中仍然没有性能）

Question

我正在努力寻找一种方法让 CSS 页面转换在 google chrome 中表现良好。

在时间轴上的 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 demo，发现了 2 个问题：

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

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

更好。 （这点之前已经讲过好几次了，但检查一下总是好的）。

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

将改变：变换；

应该让浏览器为将来更改此属性做好准备。但我看不出有什么不同。

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

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

至少在我的情况下，更改这两个问题会使红色标记几乎消失

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