V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
meteor2013
V2EX  ›  问与答

相同的动画(没有图片。用纯 CSS 实现和用 Javascript 实现,那个会更快呢?

  •  1
     
  •   meteor2013 · 2015-07-14 14:04:55 +08:00 · 1262 次点击
    这是一个创建于 3403 天前的主题,其中的信息可能已经有所发展或是发生改变。
    4 条回复    2015-07-14 14:55:24 +08:00
    imn1
        1
    imn1  
       2015-07-14 14:09:49 +08:00
    css
    YuJianrong
        3
    YuJianrong  
       2015-07-14 14:37:57 +08:00   ❤️ 1
    这要看怎么定义快。
    CSS transform+transition(animation): 现在大部分设备(包括移动设备)都提供了GPU加速的transform+transition支持,也就是说用这个做动画流畅度很高(快解释为流畅度的话),但也有缺点,缺点就是在没动画的时候加上动画的话,浏览器渲染器需要将dom render成贴图,再交给GPU去加速的,这里会有一个在部分移动设备上是人眼能觉察的延迟。
    CSS + Javascript: 首先做动画的流畅度是肯定不如CSS的,然后响应(快解释为响应的话)要看你的JS是否会导致relayout。如果没有relayout只有repaint的话即使是移动设备响应延迟也几乎无法察觉。
    Canvas + Javascript: 响应最好的方案,毕竟没有relayout repaint什么一大堆。缺点是写起来很困难,根本不像在做网页了,流畅度介于以上两方案中间,原因很简单:虽然canvas的描绘是GPU加速的,但每一帧的刷新代码却是JS,自然比纯native的方案流畅度有所降低。
    leojoy710
        4
    leojoy710  
       2015-07-14 14:55:24 +08:00   ❤️ 1
    http://greensock.com/css-performance
    还有这篇文章下面一篇google的文章
    https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript

    结论就是 请根据具体动画的情况适用css或者js
    js+transform应该是比transition/animation+transform要快
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3913 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 10:25 · PVG 18:25 · LAX 02:25 · JFK 05:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.