mattgperry
Joined 4 years ago
Joined 4 years ago
Updating the DOM (as in innerHTML) is always expensive because it triggers layout. This is true whether you're doing it from JS or a CSS trick like on this page.
Finally this approach is using CSS custom properties. These are slow - slower than JS for most things.
If you stop all animations on this page and profile it via Chrome you can see this in effect. The root node is animating a CSS variable. 117 elements have their style recalculated. Every frame - yet no animations are running. There's also a tiny paint triggered too, obviously there's been no changes so it is tiny in this instance, but a paint is always triggered when a CSS variable updates.
This is why animating x and y separately via CSS and a style like `translate(var(--x) var(--y))` would be worse than animating them via JS ala Framer Motion/GSAP.
This isn't even new. Casio etc have designed digital square watches for decades because they don't need to be round without clock arms.
Look at your profiler. Notice any significant overhead? You don't.
Implement this same thing using events and `.style` directly. You will get the exact same result.
The pointerEvent => style feedback loop is unfortunately very slow, more or less so in different browsers/operating systems.
Interesting that you would know so little about this and yet feel confident enough to make a proclamation like this is evidence of React's performance.
How do this two behaviours compose together/interact with each other?
There is no "hold their own". This would be a state of perpetual warfare. The only way to end the war is to allow Russia to claim Ukraine or push Russia out of Ukraine. Personally I would rather the Russian border to be as far east as possible.