TIL 034 textContent vs innerText

最近,バニラjsプロジェクトではレンダリングを最適化するためにDOMを直接操作する過程で,いくつかの興味深い事実を知り,まとめた.

🧙̴̴̴̴̴innerTextは還流を引き起こす。

エレメントのinnerTextを取得すると、リフローが発生します.リフローは、ブラウザレンダリング中にスクリーンレイアウトを計算するステップです.なぜ単純にDOMのテキストを読み取るとリフローするのでしょうか?
innerText is aware of style and will not return the text of hidden elements
MDNのinnertexT説明.innerTextは、DOMに適用されたスタイルを反映した後、表示されないコンテンツを返さない(「display:none」など).すなわち、innerTextにアクセスすると、再生によってスクリーン上でレンダリングされたテキストのみが返される.
これに対してtextContentはすべてのテキストを返すので、リフローは発生せず、DOM要素のテキストを直接返します.リフローは簡単な演算ではないので、覚えておいたほうがいいです.
What is the Difference Between textContents, innerText, and innerHtml?
why would textContent not trigger a reflow

🧙‍♂️ textContentを変更すると還流しないのではないでしょうか。

では、dom要素のtextContentを変更すると、画面上のテキストをリフローせずに変更できるはずです.実験結果はそうではなく,テキストの内容を変更するとリフローが現れる.

調べてみると、テキストの内容の変更は「同期」して還流を引き起こすことはありませんが、最終的には次の絵の前にテキストの変更がレイアウトの変更を引き起こす可能性があるので、還流を引き起こすしかありません.
Why is setting textContent triggering reflow?

🧙‍♂️ 親要素のinnerTextを変更すると、表示される部分だけが変更されますか?

実験の結果はそうではない.この要素のテキストは変更され、HTMLはパケット化されません.つまり、すべてのサブノードが削除されます.これはテキストの内容の変更と同じです.
たとえば、

<div class='wrapper'>
	<span>보이는 부분</span>
  	<span class="hide">숨겨진 텍스트</span>
<div>

パッケージ要素のinnerTextまたはtextContentを「新しいテキスト」に変更すると、サブノードは消え、「新しいテキスト」のみが残ります.

<div class='wrapper'>
  새 텍스트
<div>