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)
To my knowledge, setting textContent shouldn't cause style recalculation. I have also tried giving the element fixed dimension, but that did not help.
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>.