rstats is causing a full document layout on each update

[kirbysayshi]

On your example pages (as well as my own experiments), I'm seeing a full document layout in Chrome:

It's only taking around 0.5ms, but I still find it strange that rstats is forcing the entire document to relayout. And in terms of a single frame, that's almost 3% of the total time allotted for 60fps. Obviously rendering rstats is not free, but it should ideally use as little time as possible.

Thanks for making rstats, it's been really cool to use!

[kirbysayshi]

Update:

Setting an explicit pixel height and overflow: hidden on the main wrapper div seems to limit the scope by setting a layout boundary. But the ideal would be to auto calculate that based on the counters/graphs. In addition, setting the text node of the span tags manually instead of using textContent could also prevent unnecessary layouts too (http://stackoverflow.com/questions/17199958/why-does-setting-textcontent-cause-layout-thrashing).

[spite]

Good points.

I've updated the lib so it fixes the full document layout (fixing overflow and setting height) I still think there should be an easier way to fix it.

Regarding the textContent causing layout thrashing, I've tried several approaches, including the textNode.nodeValue, but there's no difference. I'll try a specific test case and see what I find.

[kirbysayshi]

I also looked into setting textContext vs nodeValue and couldn't get chrome to report differently either. So I'm really hopeful you'll figure something out!

[kirbysayshi]

@spite So... nearly 10 years later! Today I discovered what was causing the layout thrashing, after recently including rstats in a new project.

text-align: right!!

The Chrome devtools > Rendering have a Layout Shift Regions checkbox.

It seems that whenever a number changes digits, whether it's 0 -> 0.0 or 0 -> 10, etc, text-align: right causes a layout shift! The fix is text-align: left.

Hope you're well!