A 'Commit' Task In The Performance Inspector Is Slowing Down My JavaScript Game

Question

This is probably relatively simple, but unfortunatly it's not an easy thing to google.

A client has tasked me with making a little 404 page runner game, similar to the google dino game. It runs fairly well despite using a ton of css animation.

My big problem right now: every once in a while there is a 'Commit' task called that lags the game for a second. It's sometimes enough to make the player lose.

Commit event

All I can tell is that it might be something to do with rendering the CSS. But google has turned up empty.

I would apreciate any tips on how to minimize the effects of whatever this is. Thank you!

Answer 1

Maybe you could inspect your code keeping 'The pixel pipeline' in mind -> https://web.dev/rendering-performance/

When animating on the web you want to keep the pipeline as short as possible.

For example: if you want to animate an element moving from left to right you could animate the left value but this will cause a layout recalculation followed by paint and composite. You could do the same thing by using transform: translateX(), this will only cause a composite recalculation which is much shorter.

Maybe these articles also help:

• https://web.dev/animations-overview/
• https://gist.github.com/paulirish/5d52fb081b3570c81e3a
• https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/

Answer 2

I found switching my app from WebGL mode to Canvas avoided the slow "Commit" performance problem entirely, though why chrome suddenly started chugging from WebGL is still a question. Edge and Firefox did not have these issues.