1
switch 2013-12-16 22:20:25 +08:00
使用 CSS3 时开启“硬件加速”试试?(transition3d)
|
2
P233 2013-12-16 22:26:29 +08:00 1
用 position 定位其实关闭了硬件加速,全部使用 transform:transition3D()
|
3
P233 2013-12-16 22:28:19 +08:00
transform:translate3d()
typo 错误,抱歉 |
4
txlty 2013-12-16 22:32:42 +08:00
PC端是流畅了,但你没注意到风扇越来越响么?
|
5
no13bus 2013-12-16 22:55:45 +08:00
做彩票的
|
6
xavierskip 2013-12-16 23:02:24 +08:00
在电脑端也没觉得多流畅呀。小球速度太快了吧
|
7
barretlee 2013-12-16 23:18:40 +08:00 1
注意算法的优化,通过 chrome 查看程序运行 profile ,将近十个函数的调用超过了 100ms,甚至还有300ms的, 超过100ms的函数都有待优化。
减少计算和重绘,这么多元素不停的运动,页面开销肯定很大啊,每次浏览器渲染都要计算元素的位置。 像这样的东西,用 canvas 作图,方便省事,无 DOM,效率高。 |
8
Mutoo 2013-12-16 23:29:04 +08:00 1
font 很要命的,能用图就用图,或者用 canvas image data。
|
9
leohxj 2013-12-17 10:59:41 +08:00
说几点你试试:
1. 把小球换成canvas 2. 使用translate3d(),去移动位置,而不是top left. 3. 可以尝试tweenlite(如果不在意文件大小)(http://www.greensock.com/gsap-js/) |
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
|
12
miniwade514 2013-12-23 19:40:22 +08:00 via Android
建议用canvas。dom操作很昂贵。
|