手机端Javascript动画性能问题。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 4030 天前的主题，其中的信息可能已经有所发展或是发生改变。

要在手机端浏览器里实现一个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

动画

Text

手机

12 条回复 • 1970-01-01 08:00:00 +08:00

switch

2013-12-16 22:20:25 +08:00

使用 CSS3 时开启“硬件加速”试试？（transition3d）

P233

2013-12-16 22:26:29 +08:00

用 position 定位其实关闭了硬件加速，全部使用 transform:transition3D()

P233

2013-12-16 22:28:19 +08:00

transform:translate3d()

typo 错误，抱歉

txlty

2013-12-16 22:32:42 +08:00

PC端是流畅了，但你没注意到风扇越来越响么？

no13bus

2013-12-16 22:55:45 +08:00

做彩票的

xavierskip

2013-12-16 23:02:24 +08:00

在电脑端也没觉得多流畅呀。小球速度太快了吧

barretlee

2013-12-16 23:18:40 +08:00

注意算法的优化，通过 chrome 查看程序运行 profile ，将近十个函数的调用超过了 100ms，甚至还有300ms的，超过100ms的函数都有待优化。

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

像这样的东西，用 canvas 作图，方便省事，无 DOM，效率高。