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.

For comparison, here's a profile of me scrolling around this Bluesky thread and hovering things. I've tried to select a roughly equal time range so it's a reasonable visual comparison. Sadly because Bluesky has deeper stacks you can't see the GPU line.

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.