why does replacing InnerHTML with innerText causes >15X drop in performance

Question

this question arises from my previous post why a tiny reordering of DOM Read/Write operations causes a huge performance difference .

consider the following code:

Answer 1

As MDN explains:

As innerText is aware of CSS styling, it will trigger a reflow, whereas textContent will not.

Using textContent instead of innerText does not cause reflow and is also fast. IE9+ also supports it as does FFX/Chrome.