alternatively, you can deterministically read post-layout values using HTML-in-canvas onpaint event
keep a hidden <canvas content="drawable"> with an onpaint handler and call canvas.requestPaint() on demand
there's a subtle difference compared to the rAF+setTimeout hack though... onpaint will fire before frame N's commit whereas rAF+setTimeout runs after frame N's commit
Why can’t we make this into a metric similar to what web did with First Contentful Paint (FCP) and other metrics.
Also, these metrics should be baked into tools like https://t.co/WhffnYMlKd?
@KacperHarasim
We now have automated half-bounce analysis created by @infomiho! Paste an X post with a screen recording and it'll automatically analyze the frames, screenshot them, and produce a report for you. Example: https://t.co/IFpwmdxGRj Very cool!
measureText performs a style re-calc and only performs layout (for container queries) if the style resolver requires it. In most cases, it won’t.
also, for a detached canvas, measureText goes straight to shaping and metrics since it is completely detached from the document’s style and layout system.
@birch_js Right, getBoundingClientRect will force a layout _if_ layout is stale. Otherwise it won't. But, measureText is performing layout work too, that's how it works.
The key is to avoid interleaving layout reads & writes, or isolate their impact.