CSS Animation 使 Mobile 网页崩溃！? 效能优化篇(3)

解决问题搂
终于最后一步要来了！问题已找到～我们动手开始优化吧

1.将连续图拿掉,改用css製作动画
原本有一个流星动画是一张750 × 148544 连续图, 利用background-position-y变更製成动画

<style>    .effect {      width: 750px;      height: 422px;      background-image: url(图片位置);    }    .effect.is-play {      animation: effect-keyframes 30s  step-end infinite;    }    @keyframes effect-keyframes {      0%          background-position-y: 0px;      3.5%          background-position-y: 422px;      .......    }</style>

最后修改成纯使用CSS製作

<style>.effect {  width: 750px;  height: 422px;}.effect .star {  /* 流星样式 */}.effect .star:after {  /* 流星尾巴样式 */}.effect.is-play .star {  animation: effect-keyframes 0.51s  ease-out;}.effect.is-play .star:after {  animation: effect-keyframes-2 0.51s  ease-out;}@keyframes effect-keyframes {  0%      transform: scale(1) rotate(0) translate3d(-26px, -162px, 0);      opacity: 0;  100%      transform: scale(1) rotate(0) translate3d(161px, 90px, 0);      opacity: 1;}@keyframes effect-keyframes-2 {  0%      transform: scale(0) rotate(-130deg) translate3d(0, 0, 0);      opacity: 0.2;  100%      transform: scale(1) rotate(-130deg) translate3d(0, 0, 0);      opacity: 1;}</style>

对！～最后拿掉了750 × 148544 连续图
用纯css+html就做完这个效果了
面对有机会用css解决的动画, 真是不能偷懒啊～

2.无法拔掉的连续图-缩小
面对有些动画，实在无法用css处理,例如蜡烛火焰的动画, 用css实在很难满足需求
这边处理的方式为"减少连续图的数量"
我们将连续图从 299 × 20691 减少到 148 × 2312
大大的减少了效能负担

3.无法拔掉的连续图-优化动画指令
面对还是需要跑连续图的动画,进行改写
待机动画原本的写法

<style>    .effect {      width: 299px;      height: 422px;      background-image: url(图片位置);    }    .effect.is-play {      animation: effect-keyframes 0.8s step-end alternate infinite;    }    @keyframes effect-keyframes {      0%          background-position-y: 0px;      5%          background-position-y: 422px;      .......    }</style>

经过优化后

<style>    .effect-wapper {      width: 750px;      height: 422px;      overflow: hidden;    }    .effect {      width: 750px;      height: 8440px;      background-image: url(图片位置);    }    .effect.is-play {      animation: effect-keyframes 0.8s step-end alternate infinite;    }    @keyframes effect-keyframes {      0%          transform: translate3d(0px, 0px, 0px);      5%          transform: translate3d(0px, -422px, 0px);      .......    }</style>

是的！背景background-position-y, 改成transform变形, 就是这点写法上的改变,就让待机时的效能产生极大改变!(详细原因请看上篇)
原本待机时的cpu使用度(左边电脑MacBook Pro, 右边小米s4)

background-position-y 变为 transform 后(左边电脑MacBook Pro, 右边小米s4)

电脑版回到正常的1%以下, 手机也从18%回到正常的1%左右