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

在现有的前端动画体系中,通常有两种模式: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
    1. div {
    2. -webkit-animation-duration: 5s;
    3. -webkit-animation-name: move;
    4. -webkit-animation-iteration-count: infinite;
    5. -webkit-animation-direction: alternate;
    6. width: 200px;
    7. height: 200px;
    8. margin: 100px;
    9. background-color: #;
    10. position: absolute;
    11. }
    12. @-webkit-keyframes move{
    13. from {
    14. left: 100px;
    15. }
    16. to {
    17. left: 200px;
    18. }
    19. }
    20.  
    21. 使用left将持续触发页面重绘,有闪烁
    22. @-webkit-keyframes move{
    23. from {
    24. -webkit-transform: translateX(100px);
    25. }
    26. to {
    27. -webkit-transform: translateX(200px);
    28. }
    29. }
    30.  
    31. 使用-webkit-transform页面只发生重组,效果好很多
    32. 详情移步:https://github.com/AlloyTeam/Mars/blob/master/performance/css-property-animation-performance.md

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

    1. -webkit-transform: translate3d(, , );
    2. -moz-transform: translate3d(, , );
    3. -ms-transform: translate3d(, , );
    4. transform: translate3d(, , );
    5. 如动画过程有闪烁(通常发生在动画开始的时候),可以尝试下面的Hack
    6.  
    7. -webkit-backface-visibility: hidden;
    8. -moz-backface-visibility: hidden;
    9. -ms-backface-visibility: hidden;
    10. backface-visibility: hidden;
    11.  
    12. -webkit-perspective: ;
    13. -moz-perspective: ;
    14. -ms-perspective: ;
    15. perspective: ;
    16. 如下面一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性:
    17.  
    18. #ball- {
    19. transition: -webkit-transform .5s ease;
    20. -webkit-transform: translate3d(, , );
    21. }
    22. #ball-.slidein {
    23. -webkit-transform: translate3d(500px, , );
    24. }
    25.  
    26. #ball- {
    27. transition: left .5s ease;
    28. left: ;
    29. }
    30. #ball-.slidein {
    31. left: 500px;
    32. }
    33. 注:3D变形会消耗更多的内存与功耗,应确实有性能问题时才去使用它,兼在权衡

    3,尽可能少的使用box-shadowsgradients

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

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

    1. position: fixed;
    2. position: absolute;

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

    1. // 触发两次 layout
    2. var newWidth = aDiv.offsetWidth + ; // Read
    3. aDiv.style.width = newWidth + 'px'; // Write
    4. var newHeight = aDiv.offsetHeight + ; // Read
    5. aDiv.style.height = newHeight + 'px'; // Write
    6.  
    7. // 只触发一次 layout
    8. var newWidth = aDiv.offsetWidth + ; // Read
    9. var newHeight = aDiv.offsetHeight + ; // Read
    10. aDiv.style.width = newWidth + 'px'; // Write
    11. aDiv.style.height = newHeight + 'px'; // Write

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

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

    1. https://github.com/AlloyTeam/Mars

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

    1. https://github.com/AlloyTeam/Mars/tree/master/issues
    1. css3翻转动画实现
    1. http://www.tuicool.com/articles/MV3UvuA
    2.  
    3. 示例:左右翻转180
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Title</title>
    6. <style>
    7. /* entire container, keeps perspective */
    8. .flip-container {
    9. perspective: ;
    10. }
    11. /* flip the pane when hovered */
    12. .flip-container:hover .flipper, .flip-container.hover .flipper {
    13. transform: rotateY(180deg);
    14. }
    15.  
    16. .flip-container, .front, .back {
    17. width: 320px;
    18. height: 480px;
    19. }
    20.  
    21. /* flip speed goes here */
    22. .flipper {
    23. transition: 5s;
    24. transform-style: preserve-3d;
    25.  
    26. position: relative;
    27. }
    28.  
    29. /* hide back of pane during swap */
    30. .front, .back {
    31. backface-visibility: hidden;
    32. position: absolute;
    33. top: ;
    34. left: ;
    35. }
    36.  
    37. /* front pane, placed above back */
    38. .front {
    39. z-index: ;
    40. background-color: antiquewhite;
    41. -webkit-box-shadow:30px 30px 30px aquamarine;
    42. }
    43.  
    44. /* back, initially hidden pane */
    45. .back {
    46. transform: rotateY(180deg);
    47. background-color: aqua;
    48. }
    49. </style>
    50. </head>
    51. <body>
    52. <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    53. <div class="flipper">
    54. <div class="front">
    55.  
    56. <!-- 前面内容 -->
    57. </div>
    58. <div class="back">
    59.  
    60. <!-- 背面内容 -->
    61. </div>
    62. </div>
    63. </div>
    64. </body>
    65. </html>
    1.  
    1.  
    1.  

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

  1. CSS动画属性性能详细介绍

    CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐 ...

  2. CSS动画的性能分析和浏览器GPU加速

    此文已由作者袁申授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 有数的数据大屏可以在一块屏幕上展示若干张不同的图表,以炫酷的方式展示各种业务数据.其中有些图表使用CSS实现了 ...

  3. css动画属性--轮播图效果

    通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...

  4. js监听指定元素的css动画属性

    MDN 监听css动画,开始,迭代次数,结束,中断 回调函数返回 animationEvent属性 <!DOCTYPE html> <html> <head> &l ...

  5. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  6. css动画属性--小球移动

    主体只有一个div <body> <div></div> </body> 样式部分(测试:目前的浏览器还是需要加前缀才能兼容) <style> ...

  7. 盒子端 CSS 动画性能提升研究

    不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...

  8. CSS3动画(性能篇)

    写在前面 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量.功耗与流畅度. 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额 ...

  9. css3动画的性能优化

    目前对提升移动端CSS3动画体验的主要方法有几点:尽可能多的利用硬件能力,如使用3D变形来开启GPU加速 -webkit-transform: translate3d(0, 0, 0); -moz-t ...

随机推荐

  1. 实验三——for语句及分支结构else-if

    1.本节课学习到的知识点: (1)for语句是循环语句,它可以实现c语句的重复执行 (2)for语句中的3个表达式的执行顺序和书写顺序不同 (3)遇到复合语句时要用大括号将几句话括起来,复合语句在语法 ...

  2. j2ee部分

    j2ee部分 1.BS与CS的联系与区别. C/S是Client/Server的缩写.服务器通常采用高性能的PC.工作站或小型机,并采用大型数据库系统,如Oracle.Sybase.InFORMix或 ...

  3. 0-js判断电脑或手机登录

    <script type="text/javascript"> try{ if(/Android|webOS|iPhone|iPod|BlackBerry/i.test ...

  4. dataset转list实体

    private static object GetDefaultValue(object obj, Type type) { if (obj == DBNull.Value) { return def ...

  5. Yii2中多表关联查询(join、joinwith)

    我们用实例来说明这一部分 表结构 现在有客户表.订单表.图书表.作者表, 客户表Customer   (id  customer_name) 订单表Order      (id  order_name ...

  6. java代码优化

    优化通常包含两方面的内容:减小代码的体积,提高代码的运行效率. 1.尽量指定类的final修饰符 带有final修饰符的类是不可派生的.在Java核心API中,有许多应用final的例子,例如java ...

  7. virtualenv 安装 lxml

    sudo apt-get install zlib1g-dev sudo apt-get install lib32z1-dev sudo apt-get install libxml2-dev li ...

  8. var ball0=new Ball("executing") 是怎样被执行的?

    function Ball(message){ alert(message); }; var ball0=new Ball("executing"); //var ball0=ne ...

  9. qt qml qchart 图表组件

    qt qml qchart 图表组件 * Author: Julien Wintz * Created: Thu Feb 13 23:41:59 2014 (+0100) 这玩意是从chart.js迁 ...

  10. mybatis,sql 批量更新

    <update id="update81OrderStatus" parameterType="java.util.Map">    update ...