校招刷题群
高效刷题 迎战校招
校招精选试题
近年面笔经面经群内分享
Java刷题群 前端刷题群 产品运营群
首页 > js语言和框架 > 性能和加载优化
题目

哪些方法能提升移动端CSS3动画体验?

解答

(1)尽可能多地利用硬件能力,如使用3D变形来开启GPU加速,例如以下代码。

-webkit-transform: translate 3d(0, 0, 0);
-moz-transform : translate3d(0,0, 0);
-ms-transform : translate 3d(0,0,0);
transform: translate3d(0,0,0);

一个元素通过 translate3d右移500X的动画流畅度会明显优于使用left属性实现的动画移动,原因是CSS动画属性会触发整个页面重排、重绘、重组。paint通常是最耗性能的,尽可能避免使用触发 paint的CSS动画属性。

如果动画执行过程中有闪烁(通常发生在动画开始的时候),可以通过如下方式处理。

-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden ;
backface-visibility:hidden;
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
perspective:1000;

(2)尽可能少使用box- shadows和 gradients,它们往往严重影响页面的性能,尤其是在一个元素中同时都使用时。

(3)尽可能让动画元素脱离文档流,以减少重排,如以下代码所示。

position:fixed;
position:absolute;


C 0条回复 评论

帖子还没人回复快来抢沙发