zoukankan      html  css  js  c++  java
  • 关于CSS3动画性能

    前天我去面试了...好吧,对于自己6年6份工作的悲催经历,我自己也是醉了。

    但没办法,我这种当时上学没好好学习,临毕业才出家写代码的半吊子码农,起步没起好,以至于一直没能找到真正让自己满意的工作。

    通过了几年的努力和累积,总算是把信心给拿回来了。

    这不,又踏上我的追求之路了。我真心是希望这是我最后一次换工作了。

    阿门,愿主保佑我...

    那个...好像废话说得有点多了。OK,正题时间。

    是这样,面试的时候,技术官问了我一个问题,引发了我的深思~那就是CSS动画的效率问题。

    这个...因为之前接触移动项目只有约1年的时间,当时对移动前端开发性能研究还没触及这一块...

    唉,没办法,初次接触移动项目,问题难免多多,而且当时连动画都用得不多,何况是动画性能的研究...

    所以,作为一个老实人,我如实回答了...(当然后面还有一些问题我也失水准了,以至于这一次面试我感觉十有八九是要挂了...)

    面试挂了就挂了,咱解决问题的心不能凉啊~(周围众人抛来不满的表情:你小样又在说废话了...- -b)

     

    于是各种资料查找,找到了两篇相关的文章:

    http://www.w3cfuns.com/article-5598175-1-1.html

    http://www.cnblogs.com/PeunZhang/p/3510083.html

     

    目前对提升移动端CSS3动画体验的主要方法有几点:

    1.在桌面端和移动端用CSS开启硬件加速

    我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能。

    当浏览器检测到页面中某个DOM元素应用了某些CSS规则时就会开启,最显著的特征的元素的3D变换。

    .cube {
       -webkit-transform: translate3d(250px,250px,250px) rotate3d(250px,250px,250px,-120deg) scale3d(0.5, 0.5, 0.5);
    }

    如果我们不需要对元素进行3D变换,又想启动硬件加速,可以用下面的小技巧来诱使浏览器启动硬件加速。

    .cube {
       -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
       -ms-transform: translateZ(0);
       -o-transform: translateZ(0);
       transform: translateZ(0);
       /* Other transform properties here */
    }

    使用transform: translateZ(0),不会对元素进行3D变换,但一样可以触发硬件加速。

    同理,也可以使用下面的做法:

    .cube {
       -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
      /* Other transform properties here */
    }

     

    在 Chrome and Safari中,当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果,下面的代码可以修复此情况:

    .cube {
       -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;
       /* Other transform properties here */
    }

     

    通过使用translate3d制作的位移动画流畅度会明显优于使用left,right,top,bottom等属性。

    但这种做法同时也增加了内存的使用,而且它会加快移动端设备的电池消耗。

     

    2.尽可能少的使用box-shadows与gradients

    box-shadows(阴影)与gradients(渐变)往往都是页面的性能杀手,尤其是在一个元素同时都使用了它们,所以拥抱扁平化设计吧。

     

    3.尽可能的让动画元素不在文档流中,以减少重排

    方法很简单,直接在动画元素上使用

    position: fixed;

     或者

    position: absolute;

     

  • 相关阅读:
    hdu 1174
    计算几何模板
    又是一年博客记
    hdu 1225 Football Score
    与逆序数有关的
    hdu 2844 Coins
    hdu 1171 Big Event in HDU
    UVA Exponentiation
    UVA Summation of Four Primes
    Linux:设置alias永久生效
  • 原文地址:https://www.cnblogs.com/czf-zone/p/4340185.html
Copyright © 2011-2022 走看看