使用CSS3动画识别帧丢失的原因

Question

我试图找出动画中极度放缓的原因.如您所见(下图),油漆时间偶尔会出现峰值并导致帧速率降至<15 fps.

我无法显示该网站,但我可以告诉你,它在前端不是轻量级的,它是一个设计展示网站,因此有很多大图像从视图端口外部动画.我需要确定这是否只是他们将要处理的事情,或者是否可以采取任何措施来缩短喷漆时间.

所有动画都是使用这些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 Triggers中找到由各个CSS属性触发的工作的完整列表,您可以找到有关在HTML5 Rocks 上创建高性能动画的完整指南.我的猜测是你可以做很多渲染树,布局和绘画优化.

使用will-change以确保浏览器知道你打算什么动画.will-change属性允许您提前通知浏览器您可能对元素进行哪些类型的更改,以便它可以在需要之前设置适当的优化.元素可以更改和渲染更快,从而获得更流畅的体验.对于您的示例,为变换添加will-change如下所示:

.page {
  will-change: transform;
}

注意:不要使用will-change太多元素,否则会导致相反的情况.目前Chrome,Firefox和Opera都支持此功能.它似乎将来会得到所有现代浏览器的支持.