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

Question

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

在时间轴上的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收集统计信息的方式似乎存在问题.您已启用"屏幕截图".这似乎是延迟的主要原因,Chrome需要渲染和存储屏幕截图的时间.

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

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

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