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.

Answer 2

The difference almost certainly comes from the extra effort it takes to get the InnerText (which I believe removes extraneous tags and just returns the text within an element). InnerHTML on the other hand simply returns data that has already been parsed and understood by the browser.