V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
mamimoluo
V2EX  ›  JavaScript

手机端Javascript动画性能问题。

  •  
  •   mamimoluo · 2013-12-16 21:28:07 +08:00 · 4562 次点击
    这是一个创建于 3980 天前的主题,其中的信息可能已经有所发展或是发生改变。
    要在手机端浏览器里实现一个47个带有数字小球随即跳动的动画,在电脑上很流畅,可是到了手机端(iPhone4),就非常卡。
    最开始尝试使用jQuery来实现,后来发现所有通过计时器动态改变CSS属性原理的库到了手机里都卡的一笔。
    后来采用CSS transition还是卡,
    最后采用Raphael库,采用SVG来动画,在没有text节点的时候很流畅,可是一旦加了text节点的时候,又卡的一笔。是不是浏览器在动画text的时候需要重新渲染font,因此很卡?

    大家帮忙看看,有没有好的解决方案,问题的根源在哪。

    jQuery + CSS3实现:http://demo.7leyuan.com/ticai/index.html
    Raphael的SVG实现:http://demo.7leyuan.com/ticai/svg.html
    12 条回复    1970-01-01 08:00:00 +08:00
    switch
        1
    switch  
       2013-12-16 22:20:25 +08:00
    使用 CSS3 时开启“硬件加速”试试?(transition3d)
    P233
        2
    P233  
       2013-12-16 22:26:29 +08:00   ❤️ 1
    用 position 定位其实关闭了硬件加速,全部使用 transform:transition3D()
    P233
        3
    P233  
       2013-12-16 22:28:19 +08:00
    transform:translate3d()

    typo 错误,抱歉
    txlty
        4
    txlty  
       2013-12-16 22:32:42 +08:00
    PC端是流畅了,但你没注意到风扇越来越响么?

    no13bus
        5
    no13bus  
       2013-12-16 22:55:45 +08:00
    做彩票的
    xavierskip
        6
    xavierskip  
       2013-12-16 23:02:24 +08:00
    在电脑端也没觉得多流畅呀。小球速度太快了吧
    barretlee
        7
    barretlee  
       2013-12-16 23:18:40 +08:00   ❤️ 1
    注意算法的优化,通过 chrome 查看程序运行 profile ,将近十个函数的调用超过了 100ms,甚至还有300ms的, 超过100ms的函数都有待优化。

    减少计算和重绘,这么多元素不停的运动,页面开销肯定很大啊,每次浏览器渲染都要计算元素的位置。

    像这样的东西,用 canvas 作图,方便省事,无 DOM,效率高。
    Mutoo
        8
    Mutoo  
       2013-12-16 23:29:04 +08:00   ❤️ 1
    font 很要命的,能用图就用图,或者用 canvas image data。
    leohxj
        9
    leohxj  
       2013-12-17 10:59:41 +08:00
    说几点你试试:
    1. 把小球换成canvas
    2. 使用translate3d(),去移动位置,而不是top left.
    3. 可以尝试tweenlite(如果不在意文件大小)(http://www.greensock.com/gsap-js/)
    mamimoluo
        10
    mamimoluo  
    OP
       2013-12-17 12:42:21 +08:00
    @leohxj 之前使用过tweenlite,可能是适用方法不对,我用纯canvas试一试
    Tvguy
        11
    Tvguy  
       2013-12-23 13:51:33 +08:00 via iPad
    Basically mobile browser sucks in timer and on scroll events etc. try https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame
    miniwade514
        12
    miniwade514  
       2013-12-23 19:40:22 +08:00 via Android
    建议用canvas。dom操作很昂贵。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1035 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 19:22 · PVG 03:22 · LAX 11:22 · JFK 14:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.