Document which functions can cause layout thrashing (forced reflow)

[noamr]

Proposal

There are many JS functions that can generate forced reflow / layout thrashing (calling style/layout calcs synchronously).
It would be great if a function/getter that has that side effect would have that marked in its mdn entry

See this gist by @paulirish as a list we can start from.

Browser support

No response

Tasks

• [ ]

Dependencies

• [ ]

Additional information

No response

Are you willing to support this work?

No response

[kurtextrem]

Definitely a +1 from my side. I'd also propose to add an updated list of css-triggers to MDN (maybe even per CSS prop, e.g. similar to "Baseline" just less prominent?) -> https://github.com/GoogleChromeLabs/css-triggers.
The original domain got hijacked and now serves mostly ads, someone re-upped the old css-triggers to https://www.lmame-geek.com/css-triggers/, meanwhile. It's really dated by now and doesn't contain new CSS props like content-visibility etc.

I can also open a new issue for this, but maybe we can create a common solution for this (as mentioned, maybe similar to "Baseline", like "Baseline Performance") as a section below "Browser compatibility" or in the browser compat. table by using some kind of icon (maybe the red triangle from devtools)?