首页 > 试题广场 >

Flappy Bird是风靡一时的手机游戏，玩家要操作一只小

[问答题]
Flappy Bird是风靡一时的手机游戏，玩家要操作一只小鸟穿过无穷无尽的由钢管组成的障碍。如果要你在HTML前端开发这个游戏，为了保证游戏的流畅运行，并长时间运行也不会崩溃，请列举开发要注意的性能问题和解决的方法。
添加回答
推荐
Oceanbao头像 Oceanbao

背景的卷轴效果优化。背景不能是无限长的图片拼接，必须有回收已移出的场景的方法。

将复杂运算从主UI线程中解耦。比如场景中小鸟的运动轨迹、碰撞算法等，需要在空闲时间片运算，不能和UI动画同时进行。

将比较大的运算分解成不同的时间片，防止阻塞主UI线程。最好使用webworker。

注意内存泄漏和回收。使用对象池管理内存，提高内存检测和垃圾回收。

进行预处理。将一些常用的过程进行预处理，

控制好帧率。将1秒分解成多个时间片，在固定间隔时间片进行UI动画，其他时间片用在后台运算。

通过 GPU  加速和 CSS transition  将小鸟飞行动画和背景动画分离


编辑于 2014-12-05 10:28:45 回复(1)
ruru头像 ruru
1.长时间运行会崩溃的原因就是‘内存泄漏’。我们在日常的JS程序中并不太在意内存泄漏问题，因为JS解释器会垃圾回收机制，大部分无效内存会被回收，另一方方面JS运行在客户端，即使出现内存泄漏也不是太大的问题，简单的刷新页面即可。但是，如果出现要预防内存泄漏的场景还是要注意一些问题。

2.针对这个场景来说，即时长期运行出现内存泄漏可能还是很低。第一方面，数据量很少，水管维护一个数组即可，然后每隔一段时间更新数组，来达到水管长度不同的效果。小鸟只要维护一个对象即可。通过移动水管检查碰撞来就可以实现游戏逻辑。因为在浏览器端，JS程序和页面UI渲染共用一条线程，如果计算时间过长会使渲染阻塞，在HTML5中利用webworker已经可以开辟一个新线程专门负责计算解决这个问题了。
发表于 2015-08-03 12:10:25 回复(0)
泡泡头像 泡泡
该游戏为卷轴类游戏，会随机产生地图同时已经历的地图将不会再使用到，所以应该把前面不可视的元素销毁掉，同时要避免循环引用，小心内存溢出。开发时，可以用profile工具查看内存使用情况。
发表于 2014-12-28 18:48:22 回复(0)
晓晓TZ头像 晓晓TZ
用Phaser来制作一个html5游戏——flappy bird http://www.cnblogs.com/2050/p/3790279.html
发表于 2015-03-29 22:04:27 回复(0)
牛客112650号头像 牛客112650号
为了减少对DOM的操作可以使用canvas来进行绘图，提高性能
发表于 2015-01-19 12:42:21 回复(0)
南宫影露头像 南宫影露
对一只小鸟穿过无穷无尽的由钢管组成的障碍这一过程，势必要产生很多的数据，这是这位玩家在此次游戏过程中的得分情况，但是如果在开发过程中，对累计的数据持续不断的与后台的数据库进行写入操作，这样反复多次的访问，会导致数据库服务器的崩溃，而且多次与后台进性数据交互，也会影响界面的执行速度，降低用户的体验。
发表于 2017-08-26 16:29:53 回复(0)
mzvast头像 mzvast
流畅运行方面：
遵循javascript->style->layout->paint->composite的渲染顺序，尤其防止在设置layout的时候计算尺寸，这样会导致强制同步回流。
稳定性方面：
背景可以重复利用，减少资源开销。
发表于 2016-09-04 14:20:41 回复(0)
︶ㄣωǒ微笑头像 ︶ㄣωǒ微笑
用div包住几个柱子利用math.random随机生成柱子的高度 div是absolute的 向左动 类似无缝滚动 当重新换位时重新触发math.random
发表于 2015-01-26 15:10:35 回复(0)
牛客308427号头像 牛客308427号
1.尽量减少HTTP请求的次数
2.css文件放在页面头部
3.js文件放在页面底部
4.用link代替@import方式
5.去除重复的js脚本
6.不要用css表达式
7.使用CDN
8.缓存的使用
发表于 2015-01-10 11:18:31 回复(2)
Azz头像 Azz
及时释放掉不在画面中的元素
发表于 2014-12-28 22:40:03 回复(0)
common0头像 common0
注意请求的次数控制。
发表于 2014-12-27 20:17:17 回复(0)
牛客520117号头像 牛客520117号
发表于 2014-12-20 00:52:21 回复(0)
留在自己的小世界头像 留在自己的小世界
1.减少HTTP请求；
2.减少对DOM的操作
3.使用JSON格式来进行数据交换；
4.高效使用HTML标签和CSS样式
发表于 2014-12-18 23:14:13 回复(0)
Bubble头像 Bubble
事件委托

发表于 2014-12-16 19:34:58 回复(0)
你在我记忆里面头像 你在我记忆里面
使用canvas不使用dom来绘图
发表于 2014-12-15 14:08:28 回复(0)
LのMozart头像 LのMozart
可能会出现内存的问题，还有游戏响应速度的问题
可以使用异步加载技术来解决响应速度的问题，可以使用离线缓存技术
发表于 2014-12-11 15:09:53 回复(0)
LのMozart头像 LのMozart
可能会出现内存的问题，还有游戏响应速度的问题
可以使用异步加载技术来解决响应速度的问题，可以使用离线缓存技术
发表于 2014-12-11 15:02:58 回复(0)
乐头像 乐
f
发表于 2014-12-11 10:22:04 回复(0)
牛客501870号头像 牛客501870号
及时清空dom，避免内存占用过多；
限定dom数量；

发表于 2014-12-08 16:45:17 回复(0)
提交观点

问题信息

前端工程师 2015 Javascript 百度 HTML
来自：百度2015前端研发笔试卷
上传者：小小
难度：
19条回答 21197浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号