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