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

我试图找出动画中极度放缓的原因.正如您所看到的(下图),涂料时间偶尔会出现峰值并导致帧速率下降到<1. 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树？

我怎样才能找出导致这种情况的原因？

最佳答案

优化只是猜测而没有要查看的页面,但我可以给你一些可能有用的想法.

CSS变换和不透明度属性不会触发布局或绘制.动画是由JavaScript还是CSS处理并不重要.除了变换之外的其他东西必须导致它.可以在CSS Triggers找到由各个CSS属性触发的工作的完整列表,您可以在HTML5 Rocks上找到有关创建High Performance Animations的完整指南.我的猜测是你可以做很多渲染树,布局和绘画优化.

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

.page {
  will-change: transform;
}

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

原文地址：https://www.jb51.cc/css/427367.html