Post

This is awesome.

I don't think I'm a UI expert, but the browser gives us plenty of tools to look into the performance of the web. Profiling this page it looks to me like it's able to do a lot of the work on the GPU, which will be more efficient but it's still lots of work being done compared to your average page.

This profile was taken with me circling my mouse around the buttons. A bunch of GPU work being done, and then some animations being triggered any time I accidentally went _over_ a button. The red tags on some of them is attempts to animate box-shadow, which can't be composited (is more expensive).

Everything works smoothly at 20x CPU throttling but given a lot of work happens on the GPU that's not surprising. Frustrating we still can't throttle the GPU to properly emulate lower-end devices, but here we are. Given how cool this is, it doesn't look egregiously expensive to me.

a lot of gpu lol

I think it's tricky to read graphs like this because it depends on quite a lot of things. I'm not an expert but I think the GPU clock rate can fluctuate a lot, especially on devices like phones and laptops where they're trying to be as power efficient as possible. Here's a screenshot from my laptop.

Generally speaking, it's good to pass off as much as you can to the GPU, because it means the browser has decided the GPU is the right tool for the job and it's usually right. The GPU will do the work faster and more efficiently than the CPU would.