我试图找出动画中极度放缓的原因.正如您所看到的(下图),涂料时间偶尔会出现峰值并导致帧速率下降到<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树？
我怎样才能找出导致这种情况的原因？
最佳答案
优化只是猜测而没有要查看的页面,但我可以给你一些可能有用的想法.
原文链接：https://www.f2er.com/css/427367.htmlCSS变换和不透明度属性不会触发布局或绘制.动画是由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的支持.
