[troupo]

Which draw calls result in "changing border width will cause a full page re-flow in some browsers, and bot others"?

Which draw calls are "literally any animation will cause the full re-flow of the document unless you make sure an element is not a part of the document, but then you'll have issues with positioning, weird gaps etc."

Which draw calls teach you that "well, this primitive animation consumes 15% of CPU, but will only consume 6% if you go out of your way to make it 'performant'"?

[RumourRider]

You are being disingenuous. I can always use some hyper specific example to disprove any statement about what is generally true. That doesn't mean that understanding what is typically happening is useless. Which is essentially what your claim is.

[troupo]

> You are being disingenuous. I can always use some hyper specific example

These are not hyperspecific examples. We're literally discussing under an article which has a primitive animation which was, quote, "using 60% CPU and 25% GPU on [a] M2 MacBook"

How is 2D graphics programming helping there?

The article goes on to describe, correctly, layout properties ("The W3C spec is full of these!"), paint properties ("this tiny "bikeshed" SVG which you can find on lots of W3C spec pages. It costs ~30% CPU!") and composite properties.

These are not specific examples. These are literally footguns upon footguns that literally have no corresponding counterpart anywhere.

> That doesn't mean that understanding what is typically happening is useless. Which is essentially what your claim is.

Yes, knowing 2D graphics programming is 100% useless to understand what's happening with CSS and DOM.

[RumourRider]

> These are not hyperspecific examples. We're literally discussing under an article which has a primitive animation which was, quote, "using 60% CPU and 25% GPU on [a] M2 MacBook".

No we are not. Someone asked about how one learns some techniques that the OP mentioned (that were simpler than the ones given in the article). I gave some general advice on how one should think about what is happening and some general advice about how to think about performance.

Then you are pretending that none of this is relevant because you are concentrating on the hyper specific stuff in the article (which we are no longer talking about).

I also disagree that this cannot be reasoned about by learning a bit about how graphics works, Cartesian coordinate system and literally turning on the paint flashing tool that is in dev tools. It is literally obvious what is happening when you see it.

> Yes, knowing 2D graphics programming is 100% useless to understand what's happening with CSS and DOM.

In fact it was very helpful to help me to understand what was happening. I literally said to myself "wait a minute, that is kinda like this thing I did in SDL 1.2 in university". You are literally telling me, that something I know to be useful isn't, because you say so. That is unreasonable.

[troupo]

> No we are not.

Yes. Yes we are literally discussing this under an article whose introduction literally says what I quoted.

> Someone asked about how one learns some techniques that the OP mentioned

Yes, and the techniques OP mentioned literally cannot be learned from 2D graphics because nowhere in 2D graphics are you going "ah yes, to fix 60% CPU utilization for a primitive animation, you need to apply this awkward workaround that will tell the browser not to reflow the page".

Edit: and this particular technique is only applicable to this specific property for reasons that do not exist anywhere else, except in the browsers.

> wait a minute, that is kinda like this thing I did in SDL 1.2 in university

Well, it's not. Just because it kinda somewhat looks like something different doesn't make it so. Hence my question in this comment: https://news.ycombinator.com/item?id=44658482

Because those are not hyper specific, no matter how much you pretend they are