performancebrowserrequestanimationframereflow

Why is setting textContent triggering reflow?


I have a simple countUp/Down utility, which utilizes requestAnimationFrame to set the textContent of a specific DOM. Surprisingly every time I make the content update, the browser triggers a reflow. Is there any way to avoid this?

There is a simple demo on requestAnimationFrame found in CodePen, using the performance tool of Chrome dev tool, you can see each callback call is followed by reflow (Layout) Performance result

To my knowledge, setting textContent shouldn't cause style recalculation. I have also tried giving the element fixed dimension, but that did not help.


Solution

  • Unlike some methods, it doesn't trigger a reflow synchronously, but when the next painting will occur, the browser will still have to recalculate the layout since the textContent change could have changed the page's layout.

    The only way to avoid a reflow at all I can think of, would be to render this text in a <canvas>.