推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
这是一个创建于 4416 天前的主题，其中的信息可能已经有所发展或是发生改变。
要在手机端浏览器里实现一个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
最开始尝试使用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
 |
1
switch 2013 年 12 月 16 日
使用 CSS3 时开启“硬件加速”试试？（transition3d）
|
 |
2
P233 2013 年 12 月 16 日  1
用 position 定位其实关闭了硬件加速，全部使用 transform:transition3D()
|
|
3
P233 2013 年 12 月 16 日
transform:translate3d()
typo 错误，抱歉 |
 |
4
txlty 2013 年 12 月 16 日
PC端是流畅了，但你没注意到风扇越来越响么？
  |
 |
5
no13bus 2013 年 12 月 16 日
做彩票的
|
 |
6
C0VN 2013 年 12 月 16 日
在电脑端也没觉得多流畅呀。小球速度太快了吧
|
 |
7
barretlee 2013 年 12 月 16 日 1
注意算法的优化，通过 chrome 查看程序运行 profile ，将近十个函数的调用超过了 100ms，甚至还有300ms的， 超过100ms的函数都有待优化。
减少计算和重绘，这么多元素不停的运动，页面开销肯定很大啊，每次浏览器渲染都要计算元素的位置。 像这样的东西，用 canvas 作图，方便省事，无 DOM，效率高。 |
 |
8
Mutoo 2013 年 12 月 16 日 1
font 很要命的，能用图就用图，或者用 canvas image data。
|
 |
9
leohxj 2013 年 12 月 17 日
说几点你试试：
1. 把小球换成canvas 2. 使用translate3d(),去移动位置，而不是top left. 3. 可以尝试tweenlite(如果不在意文件大小)(http://www.greensock.com/gsap-js/) |
 |
11
Tvguy 2013 年 12 月 23 日 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
|
 |
12
miniwade514 2013 年 12 月 23 日 via Android
建议用canvas。dom操作很昂贵。
|
Select Language