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

Question

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

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

Answer 1

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

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

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

.page {
  will-change: transform;
}

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

Answer 2

一些新的CSS3功能可能非常繁重：

• box-shadow与border-radius
相结合
• filter（灰度，模糊，对比度......）
• transform
• ...

通过启用连续重新绘制，您可以在禁用它时查看导致此负载的规则。见this post

如果您发现导致此负载的转换，可能是因为浏览器未使用硬件加速。您可以使用不会影响转换的3D渲染来强制它。其中一条规则可以解决问题：

transform: translateZ(0);
/* or */
transform: translate3d(0,0,0);
/* or */
perspective: 1000; 
backface-visibility: hidden;

如果没有，您可以通过想知道导致负载的规则是否真的必不可少来重新考虑您的集成。

Answer 3

23秒画一幅图像有点太多了。他们不需要“处理它”，只是为了找到错误。因为存在错误，在代码中，在设计中（例如，页面中的2337个图像）或其他地方。

无法看到网站，也无法看到匿名小提琴再现其行为，甚至HTML（！），也不知道图片的数量，大小等......唯一可能的答案是：< / p>