undefined | Better HN

0 pointsnostrademons11y ago0 comments

They do perform this "back-buffering" natively. When you manipulate the DOM in a modern (post-2009 or so) browser, it's just changing a pointer and flipping a dirty bit.

The problem is that it's very easy to force a full recalculate of the whole page layout. Whenever you call .offsetHeight or .offsetWidth or .getComputedStyle, you're doing it. The full list of properties is about 2 dozen strong:

http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-...

Most web developers don't know this, and so they're actively making their pages slow. Worse, many popular frameworks build this into the library, and so if you use them, there is no way to keep your pages responsive. JQuery, for example, can easily cause 4-5 layouts with a single call to .css; on a mobile phone and a moderately complex page, that's about a second of CPU time.

0 comments

joesb11y ago

This got me wondering how React handles this requirement. Can you use React if you need to know offsetWidth/Height to do complex layout?

ksherlock11y ago

Once the component is mounted (there's a componentDidMount callback) you have access to the real DOM node and can access them (or perhaps store them as a property if necessary). The DOM node is also available from event callbacks and such.

j / k navigate · click thread line to collapse