javascript - 我做了一个h5的画布游戏，用requestanimation控制方向移动，按键控制是否按下方向键，但是有点卡，请问大神怎么优化

Question

代码具体没办法打出来，有没有大神提供宝贵的意见

Answer 1

1. 将以帧为单位的动画改成以时间为单位的动画

2. 对于不需要经常变动的图片，如背景等，请使用离屏canvas来实现

3. 对于一些细节的地方，如canvas.width 等，需要用width = canvas.width来保存值使用

4. 使用函数节流

5. 事件触发动作不要以绑定的函数为主，需要将触发的参数通过传到程序内部，通过游戏循环来实现。如：当点击右箭头的时候，你只需要告诉游戏主体，往右移动已经被触发，至于怎么运动由程序自己决定。

6. 优化循环，一般来说导致程序运行缓慢最主要的原因都是这个，内部逻辑太多，一个单位循环内根本来不及处理，对于某些数据计算性的东西，比如说生成随机数等可以通过worker来实现，对于一些不需要经常使用的功能，请尽量避免调用，只有在某些情况触发了以后，参数值变了，再进行调用。 比如说if(go) dosomething(); 只有当go为true时才进行操作，这样可以省下大量时间。

当然具体的优化细节需要根据你的代码来决定，我只能讲这么点通用的东西，其实大部分优化的思路都一样的

Answer 2

有可能是事件注册的问题，可以先从事件委托，和 dom 结束后取消事件入手。

可以使用 chrome devtool 点开 profile 看看 cpu 和 内存，看看是否是有哪些函数有泄漏或者其他问题。

Answer 3

使用canvas的局部刷新，不要每次移动就刷新整个画面

Answer 4

你是用DOM 写的小游戏？还是用CANVAS