javascript - HTML5 Game refresh rate with requestAnimationFrame -

javascript - HTML5 Game refresh rate with requestAnimationFrame -

i developing game using html5 canvas , javascript. initial fps decent game continues fps decreases. initial fps around 45 fps reduces 5 fps.

following gameloop

var last_draw = date.now(); //to track when lastly time gamedraw called lastly time var fps; function gameloop() { var elapsed = date.now() - last_draw; last_draw = date.now() fps = 1000/elapsed; context.clearrect(0,0,canvas.height,canvas.width);// function clears canvas. gameupdate();// function updates property of game elements. gamedraw(); //this function draws visible game elements in canvas. window.requestanimationframe(gameloop); //requests next frame } window.requestanimationframe(gameloop);

it have tested in next browsers:

mozilla firefox 32.0.3 google chrome 38.0.2125.101 m

my questions are:

why raf calling less game continues? is due memory leak? is because time taken gamedraw , gameupdate high? is time execute gamedraw function different time taken draw elements in canvas. gamedraw calls draw function of each game element.

you'll find lot of online tutorials optimizing canvas performance. it's not using this-or-that function, it's amount of processing happens between each 2 frames.

since question(s) can't have 1 solid answer, i'll briefly address each of sub-questions:

why raf calling less game continues?

like guessed in next question - leaking: from, say, adding more textures, event listeners, dom objects, etc. in every cycle... having many js objects piling because remain referenced garbage collector can't rid of them. bottom line need find changing/incresing between each 2 frames.

is due memory leak?

very probable, , yet easy test. in chrome, shift+escape opens task manager can see memory, cpu, etc. usage each open tab. monitor that.

is because time taken gamedraw , gameupdate high?

most definitely! causing memory leaks. larn cpu , canvas profiling, help lot. believe canvas profiling in chrome still experimental feature, you'd need enable first config flags. these 2 functions 99% of lag comes from, investigate what's going on there.

is time execute gamedraw function different time taken draw elements in canvas. gamedraw calls draw function of each game element.

that shouldn't matter because both of them blocking codes, meaning 1 happen after another. time render frame sum of two. again, proper canvas rendering optimization can wonders here.

javascript html5 performance canvas requestanimationframe