Virtual DOM

✨Why?
Reactの働き方を明確に理解し理解するために、勉強を始めました.
Virtaul DOMを探しているうちに、初心者の私には基本的な概念や知識がたくさんあるようです.
それらから一つ一つ理解して整理してみましょう.

1.ブラウザ

GUIベースのアプリケーションソフトウェアは、Webサーバ上でHTMLドキュメントまたはファイルを移動、双方向通信、出力することができる.
検索すると、ブラウザについてのコンセプトが非常に整理されています.
多くの文章を読んで、私の最も直感的な理解に整理しました.
私は사용자의 요청에 의해 서버에서 응답으로 온 자원들(HTML 등)을 화면에 출력해주는 소프트웨어と理解していますが、私たちが使っているクロムや火狐を考えると、あまり疑問はありません.
まずブラウザとは何かを理解します.
ブラウザの機能は大きく2つに分けられます.

は、ユーザが選択したリソースをサーバに要求し、ブラウザに表示する.

HTMLとCSSの説明に従ってHTMLファイル

を解析表示する.
最終的には、定義上でも機能上でも、要求されたコンテンツをブラウザ画面に表示することができます.これはブラウザの定義であり、私たちの主な役割でもあります.
これを렌더링と言います(レンダリングエンジンの概念については、これはもう少し勉強します).
スクリーン出力のプロセス、すなわちレンダリングのプロセスについて理解しました.
△次の授業を読んで、写真をもう一度見たら、もっとよく理解できるかもしれません.

①DOMツリーのHTMLブロックの構築

まず、ブラウザはレンダリングするドキュメントをHTMLとCSSに分けて読み込みます.

HTMLとCSSは、それぞれ計算と管理のためにグループ化された純粋なテキストです.

HTMLドキュメントをグループ化し、タグをDOMに変換します.

(*DOMはドキュメントオブジェクトモデルと呼ばれるオブジェクトで、コンポーネント(タグ)をオブジェクトに構造化することでブラウザでHTMLを処理します.
図に示すように、HTMLタグはツリー形式に構造化されている.)

外部CSSファイルに含まれるスタイル要素もグループ化されます.(CSSOM)

は、このようにCSSとHTMLをグループ化してブラウザで使用可能なオブジェクトモデルにするプロセスである.

②レンダリングツリーの構築

ステップ

1でグループ化されている場合、レンダリングツリーが作成され、両方を接続して表示する順序でコンテンツが描画されます.

レンダーツリーには、実際の画面に表示されるノードのみからなるスタイル情報が設定されています(たとえば、display:none;アトリビュートのノードは、レンダーツリーの作成中に除外されます).

③レンダリングツリーを配置する

レンダリングツリーの生成が完了すると、ブラウザは各ノードの正しい位置とサイズを計算し、バッチ操作を行います.

Layoutのデザインを考えることができると思います.

④レンダリングツリーの描画

Layoutによれば、レンダリングツリーを使用して要素を実際の画面に描画します.

私が読んで理解できる程度に整理しただけです.
簡単にまとめると、DOMの作成、CSSOM>レンダリングツリーの作成>レンダリングツリーに基づいて描画
変なところがあれば読む人の考えは正しい

2. Virtual DOM

仮想化DOM?
最後にDOMが何であるかを知るために、レンダリングプロセスを学びました.
現在のページは条件によって変わることが多い.例えば、ボタンを押すとそのボタンの色が変わります.
もしそうであれば、上記の例では、ボタンを押すと要求が拒否され、HTMLドキュメントが色付きボタンに変更されると、変更を反映したDOMが再構築され、ドキュメント全体が画面に再出力されます.
(これをレンダリングと呼びます.)
つまり、各ノードが変更されると、上のレンダリングプロセスが再実行されるため、小さなものだけを変更しても他のものをレンダリングする必要がなくなり、効率が低下します.
したがって,現在出現しているのは仮想DOMである.

仮想DOMは、仮想化されたDOMをメモリに作成します.

データが更新されると、仮想DOMに再表示されます.

以前の仮想DOMのコンテンツと現在のコンテンツを比較します.

変更された部分だけが実際のDOMに適用されます.

すなわち,仮想化されたDOMをメモリに入れ,変更前後の状態を比較し,最小限の内容のみを反映する.
この説明を見ると感じなくなり、他のいくつかの文章の例を見て、少し分かったようです.
△他の文章の例はもっと詳しく、簡単にやっただけです.

...
<div id="root">
    ...
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>    
</div>

上記のように、アーキテクチャが準備されている場合、liラベルの内容を変更しようとします.

📍 非効率的な方法

const root = document.querySelector('#root')
const liTagList = root.querySelectorAll('li')

liTagList[0].textContent = '4' // 렌더링 발생 (1)
liTagList[0].textContent = '5' // 렌더링 발생 (2)
liTagList[0].textContent = '6' // 렌더링 발생 (3)

変更を行うたびに、DOMにアクセスして修正とレンダリングを行います.
計3回発生した.

📍 仮想DOMを通じて?

const root = document.querySelector('#root')
const virtualDOM = document.createElement('ul') // 태그 새로 생성

// 각각의 li 태그 생성
const liFour = document.createElement('li')
liFour.textContent = '4'

const liFive = document.createElement('li')
liFive.textContent = '5'

const liSix = document.createElement('li')
liSix.textContent = '6'

virtualDOM.appendChild(liFour)
virtualDOM.appendChild(liFive)
virtualDOM.appendChild(liSix)

// 기존의 ul 태그를 새로 생성한 태그로 교체 하면서 렌더링 (1)
root.replaceChild(virtualDOM, root.querySelector('ul'))

各liラベルをレンダリングするのではなく、変更を仮想DOMにインポートし、ulラベルを全体として使用します.
変更後は1回のレンダリングで終了します.
(ここでvirtualDOMは実際の仮想DOMではなく、変数であり、理解のために同じ名前を使用しているだけです.)

の最後の部分

Virtual DOMを学習するために、レンダリング、DOM、ブラウザを簡単に観察しました.
勉強しているうちにいつも感じることができますが、勉強を始めると、やるべきことがどんどん増えていきます.
理解できる範囲でしか勉強していませんが、HTML、CSSの分割方法、レンダリングエンジン、仮想DOMで比較的に変更されたアルゴリズムなど、レンダリングの面で理解しなければならないことがたくさんあります.
しかし仮想DOMのスギとは何かを学ぶ目的が叶ったので満足です...
時間があれば、新しい接触の概念を勉強します.
最終的に、virtual DOMはより効率的なレンダリング機能を提供します!!