javascript – Ich habe ein H5-Canvas-Spiel erstellt, bei dem ich Requestanimation zur Steuerung der Richtungsbewegung und Tasten zur Steuerung verwendet habe, ob die Richtungstasten gedrückt werden sollen, aber es hängt etwas fest. Könnten Sie mir bitte sagen, wie ich es optimieren kann?

Question

Ich kann den genauen Code nicht eingeben. Gibt es einen Experten, der wertvolle Ratschläge geben kann?

高洛峰 · Answer

将以帧为单位的动画改成以时间为单位的动画
对于不需要经常变动的图片，如背景等，请使用离屏canvas来实现
对于一些细节的地方，如canvas.width 等，需要用width = canvas.width来保存值使用
使用函数节流
事件触发动作不要以绑定的函数为主，需要将触发的参数通过传到程序内部，通过游戏循环来实现。如：当点击右箭头的时候，你只需要告诉游戏主体，往右移动已经被触发，至于怎么运动由程序自己决定。
优化循环，一般来说导致程序运行缓慢最主要的原因都是这个，内部逻辑太多，一个单位循环内根本来不及处理，对于某些数据计算性的东西，比如说生成随机数等可以通过worker来实现，对于一些不需要经常使用的功能，请尽量避免调用，只有在某些情况触发了以后，参数值变了，再进行调用。比如说if(go) dosomething(); 只有当go为true时才进行操作，这样可以省下大量时间。

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

天蓬老师 · Answer

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

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

習慣沉默 · Answer

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

仅有的幸福 · Answer

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