Ask HN: Modern strategies for achieving 60fps on the web?

8 points by makeitrein 5 years ago | 2 comments

Happy Presidents Day HN - taking the day off to hack on a side project of mine - not quite sure what the pitch is yet, but it's a whiteboardy / mindmappy tool - here's a recent deploy of mine to show off some of the basic WIP features - https://tile-shift-c5nkbkutr.vercel.app/

My inner Steve Jobs is getting a bit annoyed that when I pan around, I can't achieve 60fps reliably. You'll especially notice the choppiness if you pan around a lot of cards. I understand that I could easily get to that frame speed had I chosen to build with canvas or WebGL, but the DOM is a much happier technology to work with.

The crux of the problem is that I have one event listener that fires on every mousemove event to pan the canvas... it's not the most expensive calculation, but it fires quite a bit, causing the browser to constantly spend some time scripting and re-rerendering.

What's strange is that when I plug in my external monitor, that choppiness disappears. According to my webdev friends, external monitors force your browser to use GPU acceleration for everything, regardless if the browser is viewed on the external monitor or laptop.

I found this surprising! It begs the question... why can't my app use GPU acceleration for everything?

Given that context, do you have any advice that could help me achieve 60fps? Is GPU acceleration worth exploring, or is that barking up the wrong tree?

throwaway888abc 5 years ago |

>event listener that fires on every mousemove event to pan the canvas... it's not the most expensive calculation, but it fires quite a bit, causing the browser to constantly spend some time scripting and re-rerendering.

Look at "Throttling and Debouncing Events", you don't need to process every single event as humans are not that accurate. It will make you application perceived much more smoothly.

Article about the concept.

https://www.digitalocean.com/community/tutorials/vuejs-lodas...

Next point to consider is using web worker thread for calculation and not blocking main thread. Another article about the concept,

https://medium.com/launch-school/what-are-web-workers-4a0e1d...

Have fun

speedgoose 5 years ago |

Use requestAnimationFrame, you can definitely do 60fps with a canvas, and much better like 144fps or more if your screen supports it.

If your laptop is a bit slow, you will also get better results if you connect its plug so it doesn't run on the battery on energy saving mode.