javascript - 我做了一個(gè)h5的畫(huà)布游戲,用requestanimation控制方向移動(dòng),按鍵控制是否按下方向鍵,但是有點(diǎn)卡,請(qǐng)問(wèn)大神怎么優(yōu)化
問(wèn)題描述
代碼具體沒(méi)辦法打出來(lái),有沒(méi)有大神提供寶貴的意見(jiàn)
問(wèn)題解答
回答1:將以幀為單位的動(dòng)畫(huà)改成以時(shí)間為單位的動(dòng)畫(huà)
對(duì)于不需要經(jīng)常變動(dòng)的圖片,如背景等,請(qǐng)使用離屏canvas來(lái)實(shí)現(xiàn)
對(duì)于一些細(xì)節(jié)的地方,如canvas.width 等,需要用width = canvas.width來(lái)保存值使用
使用函數(shù)節(jié)流
事件觸發(fā)動(dòng)作不要以綁定的函數(shù)為主,需要將觸發(fā)的參數(shù)通過(guò)傳到程序內(nèi)部,通過(guò)游戲循環(huán)來(lái)實(shí)現(xiàn)。如:當(dāng)點(diǎn)擊右箭頭的時(shí)候,你只需要告訴游戲主體,往右移動(dòng)已經(jīng)被觸發(fā),至于怎么運(yùn)動(dòng)由程序自己決定。
優(yōu)化循環(huán),一般來(lái)說(shuō)導(dǎo)致程序運(yùn)行緩慢最主要的原因都是這個(gè),內(nèi)部邏輯太多,一個(gè)單位循環(huán)內(nèi)根本來(lái)不及處理,對(duì)于某些數(shù)據(jù)計(jì)算性的東西,比如說(shuō)生成隨機(jī)數(shù)等可以通過(guò)worker來(lái)實(shí)現(xiàn),對(duì)于一些不需要經(jīng)常使用的功能,請(qǐng)盡量避免調(diào)用,只有在某些情況觸發(fā)了以后,參數(shù)值變了,再進(jìn)行調(diào)用。 比如說(shuō)if(go) dosomething(); 只有當(dāng)go為true時(shí)才進(jìn)行操作,這樣可以省下大量時(shí)間。
當(dāng)然具體的優(yōu)化細(xì)節(jié)需要根據(jù)你的代碼來(lái)決定,我只能講這么點(diǎn)通用的東西,其實(shí)大部分優(yōu)化的思路都一樣的
回答2:有可能是事件注冊(cè)的問(wèn)題,可以先從事件委托,和 dom 結(jié)束后取消事件入手。
可以使用 chrome devtool 點(diǎn)開(kāi) profile 看看 cpu 和 內(nèi)存,看看是否是有哪些函數(shù)有泄漏或者其他問(wèn)題。
回答3:使用canvas的局部刷新,不要每次移動(dòng)就刷新整個(gè)畫(huà)面
回答4:你是用DOM 寫(xiě)的小游戲?還是用CANVAS
