I was reading about performance issues by messing with the DOM too much that causes layout shifting and repainting by the browser. http://csstriggers.com/ site specifies properties that results in repainting.
Here’s something I’m been curious about, but haven’t been able to find much information on, or I just don’t know how to properly search for it.
Let’s say I have a bit of JavaScript that looks for a particular piece of text on the page using a regex pattern, then wraps it within a span tag with a specific class. That class enlarges the text and adds a background color.
Due to the enlargement, the content underneath the text is visually shifted down a few pixels. What’s beneath it is repainted or destroyed and recreated?
Now, I know this is probably stupid micro-optimizations that have no real-world significance, but I’m still wondering. Is there anyway to offset and prevent this repaint/reconstructions by messing with values, such as the text’s line height?
For instance, for the enlarged text I can increase the line height to a value large enough to prevent the DOM shifting, but does that really do anything?
Will there still be an unseen repaint, then un-repaint, dirty pixels, then un-dirty pixels that take place even though nothing moves?
Thanks.