Avoiding DOM shifting and repaints by manipulating line height?

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?


There;s a couple of articles here that seem to touch on the points you mention.


There are some links to some useful tools in the first article that let you see what gets repainted so you could run some tests and let us know what you find out:)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.