ブラウザのロードプロセスと仮想ドーム

1.ブラウザのロードプロセス
分光-レンダリングツリーの作成-レイアウト-ペイントプロセス.その後、JavaScriptまたはCSSでDOMまたはCSSを変更する場合は、再描画する必要があります.
(1)グループ化:ブラウザのレンダリングエンジンがHTMLとCSSをグループ化して取得するプロセス.
(1)−1はDOMツリーを形成する.

DOMツリーは、ドキュメントノード(document)、要素ノード(html、body、head、ul、scriptなど)、テキストノード(「Apple」、「Banna」など)、レビューノード(id=「apple」、src=「app.js」)からなる.
(を参照)
-テキストノードはDOMツリーの最端末です.したがって、テキストノードにアクセスするには、まず親ノード要素ノードにアクセスする必要があります.
-HTMLの構造、コンテンツ、スタイルなどを動的に操作するには、まず要素ノードを取得する必要があります.テキストノードは要素ノードのサブノードであり、ツリーノードは要素ノードに関連付けられているため、テキストノードまたはツリーノードを操作しようとする場合も同様です.
(1)-2 CSSOMツリーを形成する.

(2)レンダリングツリー
DOMツリー+CSSOMツリーをマージしてレンダーツリーを作成します.[レンダリングツリー](Render Tree)には、ページをレンダリングするために必要なノードのみが含まれます.すなわち、レンダリング出力に反映されないノード(ストライプマーカー、メタマーカーなど)の一部は省略される.一部のCSSノード(display:noneなど)もレンダリングツリーから省略されます.

(3)レイアウト
デバイスビューポート内のノードの正確な位置とサイズを決定し、レンダリングツリーにピクセル値として反映します.
(4)ペンキ
レンダリングツリーの各ノードを画面上の実際のピクセルに変換するには.位置に関係のないCSS属性(background-color、不透明など)を適用します.
2. Virtual DOM
ドキュメントオブジェクトモデル(DOM)は、アプリケーションのUI(アクセスのためのメディア)HTMLの各要素(li.headなどのタグ)をツリー構造で表す.
DOMはツリー構造なので分かりやすいが,この構造の巨大なDOMツリーは速度の問題を生じる.ツリーを変更するたびに、レンダリングツリーはリアルタイムで更新されます.(つまり、画面に10個の変更がある場合、新しいレンダーツリーを変更するたびに10回変更され、新しいレンダーツリーが作成されます).したがって,仮想DOMはこれらの不要なレンダリングを解決するためである.
仮想DOMは、実際のDOMドキュメントを抽象化する概念であり、変化の大きいビューを実際のDOMから直接処理するのではなく、仮想DOM+メモリで前処理と記憶を行い、実際のDOMと同期する.リアクター、ビュー、ロケータなどのフロントエンドフレームワークには仮想DOMが用いられる.これらのフレームワークは、画面が変化したときにドームツリーをリアルタイムで変更するのではなく、すべての変化を反映する仮想ドームを作成します.仮想ドームを使用してドーム修正を行うと、レンダリングツリーが生成されます.
htmlコード

<div>
2  <div id="header">
3    <h1>Hello, {{state.subject}}!</h1>
4    <p>How are you today?</p>
5  </div>
6</div>

virtual DOM

{
2  tag: 'div',
3  children: [
4    {
5      tag: 'div',
6      attributes: {
7        id: 'header'
8      },
9      children: [
10        {
11          tag: 'h1',
12          children: 'Hello, World!'
13        },
14        {
15          tag: 'p',
16          children: 'How are you today?'
17        }
18      ]
19    }
20  ]
21}

state is changed, state.subject is changed to ‘Mom'.

{
2  tag: 'div',
3  children: [
4    {
5      tag: 'div',
6      attributes: {
7        id: 'header'
8      },
9      children: [
10        {
11          tag: 'h1',
12          children: 'Hello, Mom!'
13        },
14        {
15          tag: 'p',
16          children: 'How are you today?'
17        }
18      ]
19    }
20  ]
21}

認知はh 1ラベルのみ変化する.したがって、すべての操作を実行するのではなく、1つの要素を更新するだけです.
*を参照
https://www.pluralsight.com/guides/virtual-dom-explained