性能主要表现：流量、功耗与流畅度

在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。 而在移动端，我们选择性能更优浏览器原生实现方案：CSS3动画。

然而，CSS3动画在移动多终端设备场景下，相比PC会面对更多的性能问题，主要体现在动画的卡顿与闪烁。

1，webkit-transform: translateX(3em) 使用优于left

  • CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite
  • Paint通常是其中最花费性能的，尽可能避免使用触发paint的CSS动画属性，这也是为什么我们推荐在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em，因为left会额外触发layout与paint，而webkit-transform只触发整个页面composite
  • div {
    
  -webkit-animation-duration: 5s;
    
  -webkit-animation-name: move;
    
  -webkit-animation-iteration-count: infinite;
    
  -webkit-animation-direction: alternate;
    
  width: 200px;
    
  height: 200px;
    
  margin: 100px;
    
  background-color: #;
    
  position: absolute;
    
}
    
@-webkit-keyframes move{
    
    from {
    
        left: 100px;
    
    }
    
    to {
    
        left: 200px;
    
    }
    
}

使用left将持续触发页面重绘，有闪烁
    
@-webkit-keyframes move{
    
    from {
    
        -webkit-transform: translateX(100px);
    
    }
    
    to {
    
        -webkit-transform: translateX(200px);
    
    }
    
}

使用-webkit-transform页面只发生重组，效果好很多
    
详情移步：https://github.com/AlloyTeam/Mars/blob/master/performance/css-property-animation-performance.md

    2，尽可能多的利用硬件能力，如使用3D变形来开启GPU加速

    -webkit-transform: translate3d(, , );
    
-moz-transform: translate3d(, , );
    
-ms-transform: translate3d(, , );
    
transform: translate3d(, , );
    
如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：

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

-webkit-perspective: ;
    
-moz-perspective: ;
    
-ms-perspective: ;
    
perspective: ;
    
如下面一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性：

#ball- {
    
  transition: -webkit-transform .5s ease;
    
  -webkit-transform: translate3d(, , );
    
}
    
#ball-.slidein {
    
  -webkit-transform: translate3d(500px, , );
    
}

#ball- {
    
  transition: left .5s ease;
    
  left: ;
    
}
    
#ball-.slidein {
    
  left: 500px;
    
}
    
注：3D变形会消耗更多的内存与功耗，应确实有性能问题时才去使用它，兼在权衡

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

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

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

    position: fixed;
    
position: absolute;

    5，优化 DOM layout 性能，减少渲染次数，示例如下：

    // 触发两次 layout
    
var newWidth = aDiv.offsetWidth + ;   // Read
    
aDiv.style.width = newWidth + 'px';     // Write
    
var newHeight = aDiv.offsetHeight + ; // Read
    
aDiv.style.height = newHeight + 'px';   // Write

// 只触发一次 layout
    
var newWidth = aDiv.offsetWidth + ;   // Read
    
var newHeight = aDiv.offsetHeight + ; // Read
    
aDiv.style.width = newWidth + 'px';     // Write
    
aDiv.style.height = newHeight + 'px';   // Write

    详情移步：https://github.com/AlloyTeam/Mars/blob/master/performance/high-performance-css3-animation.md

    另外，附上腾讯移动Web前端知识库

    https://github.com/AlloyTeam/Mars

    重点：iOS与Android平台上问题列表

    https://github.com/AlloyTeam/Mars/tree/master/issues
    css3翻转动画实现
    http://www.tuicool.com/articles/MV3UvuA

示例：左右翻转180度
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
    <style>
    
        /* entire container, keeps perspective */
    
        .flip-container {
    
            perspective: ;
    
        }
    
        /* flip the pane when hovered */
    
        .flip-container:hover .flipper, .flip-container.hover .flipper {
    
            transform: rotateY(180deg);
    
        }

        .flip-container, .front, .back {
    
            width: 320px;
    
            height: 480px;
    
        }

        /* flip speed goes here */
    
        .flipper {
    
            transition: 5s;
    
            transform-style: preserve-3d;

            position: relative;
    
        }

        /* hide back of pane during swap */
    
        .front, .back {
    
            backface-visibility: hidden;
    
            position: absolute;
    
            top: ;
    
            left: ;
    
        }

        /* front pane, placed above back */
    
        .front {
    
            z-index: ;
    
            background-color: antiquewhite;
    
            -webkit-box-shadow:30px 30px 30px aquamarine;
    
        }

        /* back, initially hidden pane */
    
        .back {
    
            transform: rotateY(180deg);
    
            background-color: aqua;
    
        }
    
    </style>
    
</head>
    
<body>
    
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    
    <div class="flipper">
    
        <div class="front">

            <!-- 前面内容 -->
    
        </div>
    
        <div class="back">

            <!-- 背面内容 -->
    
        </div>
    
    </div>
    
</div>
    
</body>
    
</html>
    

     
    

    

    

												


											
css动画属性性能的更多相关文章
	

    
								
  1. CSS动画属性性能详细介绍
		
    CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐 ...
    
		
    2. 
						
  2. CSS动画的性能分析和浏览器GPU加速
		
    此文已由作者袁申授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 有数的数据大屏可以在一块屏幕上展示若干张不同的图表,以炫酷的方式展示各种业务数据.其中有些图表使用CSS实现了 ...
    
		
    3. 
						
  3. css动画属性--轮播图效果
		
    通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...
    
		
    4. 
						
  4. js监听指定元素的css动画属性
		
    MDN 监听css动画,开始,迭代次数,结束,中断 回调函数返回 animationEvent属性 <!DOCTYPE html> <html> <head> &l ...
    
		
    5. 
						
  5. CSS3动画效果——js调用css动画属性并回调处理详解
		
    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
    
		
    6. 
						
  6. css动画属性--小球移动
		
    主体只有一个div <body> <div></div> </body> 样式部分(测试:目前的浏览器还是需要加前缀才能兼容) <style> ...
    
		
    7. 
						
  7. 盒子端 CSS 动画性能提升研究
		
    不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
    
		
    8. 
						
  8. CSS3动画（性能篇）
		
    写在前面 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量.功耗与流畅度. 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额 ...
    
		
    9. 
						
  9. css3动画的性能优化
		
    目前对提升移动端CSS3动画体验的主要方法有几点:尽可能多的利用硬件能力,如使用3D变形来开启GPU加速 -webkit-transform: translate3d(0, 0, 0); -moz-t ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 利用Servlet导出Excel
			
    -----因为Excel可以打开HTML文件,因此可以利用页面的Form表单把页面中的table内容提交给Servlet,然后后台把提交上来的table内容转换成文件流的形式,并以下载的形式转给客户端 ...
    
			
    2. 
						
  2. Json_异常_net.sf.json.JSONException: JSONObject["solution"] not found.
			
    net.sf.json.JSONException: JSONObject["solution"] not found. 没有这个元素造成的. 问题代码: JSONObject j ...
    
			
    3. 
						
  3. Docker相关文档
			
    网上找到的一个入门级Docker学习笔记,写的不错,值得一看. 转自:http://www.open-open.com/lib/view/open1423703640748.html#articleH ...
    
			
    4. 
						
  4. ios 缺少合规证明
			
    现在app上传到appStore的时候,项目中如果出现加密,状态栏是:缺少合规证明. 解决的方法是在Info.plist文件中添加:ITSAppUsesNonExemptEncryption 设置为N ...
    
			
    5. 
						
  5. final发布评论
			
    在刚刚过去的final发布会上,各小组都展示了自己团队两个月来的团队成果.以下是我对各小组的发布 过程和产品展示的评论. 1.金州勇士团队 金州勇士团队的作品是在线考试系统.从产品的角度来说,相比于b ...
    
			
    6. 
						
  6. [osx] android studio下修改avd的hosts文件
			
    1. 启动avd 安装/启动avd就不说啦,可以直接在android studio里面操作的 2. 进入adb目录 当然是打开终端来敲命令啦. cd /Users/birdylee/Library/A ...
    
			
    7. 
						
  7. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
			
    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
    
			
    8. 
						
  8. JAVA基础知识之JDBC——JDBC数据库连接池
			
    JDBC数据库连接池 数据库的连接和关闭是很耗费资源的操作,前面介绍的DriverManager方式获取的数据库连接,一个Connection对象就对应了一个物理数据库连接,每次操作都要打开一个连接, ...
    
			
    9. 
						
  9. 93、持续集成以及Jenkins的知识介绍
			
    持续集成是什么? }持续集成源于极限编程(XP),是一种软件实践,软件开发过程中集成步骤是一个漫长并且无法预测的过程.集成过程中可能会爆发大量的问题,因此集成过程需要尽可能小而多,实际上持续集成讲的是 ...
    
			
    10. 
						
  10. readline,readlines,read函数
			
    readline是读取每一行,包括'\n'.读出来是一个含'\n'的字符串. realines是读取整个文件,返回所有行的一个list(写代码的时候你需要一个文件的某几行,就可以用这个函数去切分) r ...
    
			
    11.