zoukankan      html  css  js  c++  java
  • css3动画的性能优化

    目前对提升移动端CSS3动画体验的主要方法有几点:
    尽可能多的利用硬件能力,如使用3D变形来开启GPU加速

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

     一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性;

    原因是因为:

        CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite
        Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em,因为left会额外触发layout与paint,而webkit-transform只触发整个页面composite(这也是为什么推荐在CSS动画中使用webkit-transform: translateX(500px)的方案代替使用left: 500px);

    如动画过程有闪烁(通常发生在动画开始的时候),可以尝试下面的Hack:

    -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;
    

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

    box-shadows与gradients往往都是页面的性能杀手,尤其是在一个元素同时都使用了它们.

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

    position: fixed;
    position: absolute;
    

     性能消耗图

    性能消耗图,由此可见最受欢饮和性能最好的莫过于transform和opacity了。

    其实呢,opacity和transform能解决的问题已经很多了,尽量少的使用其他的属性去进行动画制作吧

     

  • 相关阅读:
    转:WinCE驱动开发问题精华集锦
    转:WINCE6.0+S3C6410下的DM9000A驱动
    转:WinCE6.0 不重启修改IP地址
    前端小功能:canvas验证码
    前端小功能:canvas签名版
    JavaScript中数组的应用方式
    ES6--Promise
    wepy 语法高亮
    Javascript和JQuery获取浏览器窗口各种尺寸
    图片预加载
  • 原文地址:https://www.cnblogs.com/leena/p/6930079.html
Copyright © 2011-2022 走看看