How can I reduce frame drops for my javascript brick-breaker game?

Viewed 34

I am creating a brick-breaker style game using JavaScript, HTML, and CSS. However, I am noticing some dropped frames and/or partially presented frames when recording performance in Chrome Dev Tools. Any ideas how I can fix this? Here's my code: https://github.com/rsmith-github/cat-game.

I've also hosted the game live on github pages so you can test it here: https://rsmith-github.github.io/cat-game/

Here is what I see in Chrome dev tools:

  1. Frame drop example 1
  2. Frame drop example 2

Thanks!

Update: For anyone wondering, I solved the issue by using CSS 'transform: translate(x, y);' instead of 'left:' and 'bottom:'. This way there are no layout shifts, making everything much smoother. Thanks everyone for the inputs, anyway.

0 Answers
Related