why would textContent not trigger a reflow

Question

I was looking at the difference between textContent and innerText on MDN.And it shows me something that confused me a lot.

1.innerText is aware of style and will not return the text of hidden elements, whereas textContent will. (no problem, totally understand)

2.As innerText is aware of CSS styling, it will trigger a reflow, whereas textContent will not. (why?)

Answer 1

I was suggested to answer this question instead of leaving comments. Though I did a lot more research after that. Now let's take a look at the differences again.

innerText is aware of style and will not return the text of hidden elements

Referenced from MDN.

It means, innerText only get text from visible elements(not display: none, nor visibility: hidden). In addition, css styles applied on elements like text-transform: uppercase will also be taken into account. As a result, innerText will return the uppercased version of text while textContent will return the unchanged version. You can have a try of this demo on jsfiddle.

Since innerText needs to know what the most-recent style the element is, it should trigger reflow first (flush the queued reflow list) and re-calculating the style of the element.Then get the expected result.

Whereas textContent have not to do it since it's not aware of style.

If you are interested in more details of differences between innerText and textContent, you can have a read of this article.