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

Question

我正在努力寻找一种方法来使CSS页面转换在Google Chrome中表现良好。

在时间轴上的Chrome开发者工具中，我注意到了一些红色标记，他们都说了同样的事情：长帧时间表示渲染性能差。有关渲染性能的Web Fundamentals指南，请阅读更多内容。

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

我做了一个更简单的演示，我仍然得到了红色标记：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收集统计信息的方式似乎存在问题。 你有＆＃34;截图＆＃34;启用。这似乎是延迟的主要原因，Chrome需要渲染和存储屏幕截图的时间。

根据定义，在分析中计算性能工具执行其工作所需的时间不应该。但这似乎并非如此......我想说这是一个错误。

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

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