Hacker News new | ask | show | jobs
by ajflores1604 2256 days ago
As someone who's new to front end and css is there a good resource on what properties are more costly, or which functions are newer and meant to be more performant like translate3d is mentioned as being gpu accelerated? I've seen mentions of reflow, repaint, and layout thrashing but not a comprehensive list of what functions are meant to replace what other ones, or relative cost of each function in common use cases. I've managed to grasp javascript fairly easily coming from python, but css seems like this obscure black box that I thought would be much easier to get a handle on.
4 comments
ly 2256 days ago
I have no great answer to your question, and you might know this already, but while translate3d is indeed newer, it’s not a “new more performant” replacement for positioning with top/left using the position property.

It’s just another property which can sometimes be used to do what you could earlier only do with ‘position:’, but there are still many cases (the majority) you position things using the “old” position property.

They have different uses, and for that reason one also requires a reflow while the other does not.

link
aphextron 2256 days ago
>I've managed to grasp javascript fairly easily coming from python, but css seems like this obscure black box that I thought would be much easier to get a handle on.

All I can say is use it, a lot. CSS skills are more of a dark art than anything resembling engineering. And the only way you get good is by trial and error, learning what works best and why.

link
earthboundkid 2256 days ago
The key to animation on the web is to at all costs avoid using JavaScript to manipulate a DOM object on a tight timer. To achieve a smooth animation, you need between 24fps and 120fps depending on the device, so between 43 and 8 milliseconds to get everything done. Doing DOM stuff that fast is going to be a headache compared to using CSS animation or even using the Canvas API.
link
glitchdout 2256 days ago
opacity and transform (translate, scale, rotate and skew). That's mostly it.

https://www.html5rocks.com/en/tutorials/speed/high-performan...

link