1. 仮想DOMとは
仮想 DOM は実 DOM の抽象化です. 仮想 DOM ツリーは実 DOM ツリーに基づいて模倣されます. どちらも同じノードを持つ同じツリー データ構造です.
アプリケーション ページは、通常、複数の要素ノードのネストされた組み合わせで構成される基本的なスケルトンです。ノードの 1 つを変更すると、連鎖反応が発生する可能性があります。明らかなカクつき感があります。したがって、仮想 DOM を使用すると、DOM 操作の数を減らし、ページの流暢さを向上させることができます。
2. ブラウザのレンダリング プロセス
仮想 DOM を理解する前に、ブラウザーがページをレンダリングするメカニズムとプロセスを理解する必要があります。ブラウザ レンダリングの前提は、ブラウザがユーザーとの機能的な対話中にネットワーク リクエストを生成し、必要なリソースを要求するためにサーバーにリクエストを送信することです。この手順が完了すると、リソースは指定された場所にレンダリングされます。
1) HTML 解析、HTML 要素ノードの解析後に DOM ツリーを構築する;
2) CSS 解析、データ内の CSS スタイルと要素インライン スタイルを解析して要素スタイル シートを構築する;
3) DOM ツリーと CSSOM ツリーを一緒に、ノードに応じて レンダリング ツリーの構築と組み合わせて、各ノードにはマウント方法があります;
4) レンダリング ツリーが構築されると、ブラウザはレイアウトの呼び出しを開始し、レンダリング ツリーがページ上の指定された位置に表示されることを確認します。
5) レンダリング ツリー ノードの座標が確定すると、ブラウザはノード ペイント メソッドを呼び出し、スタイル シートと座標を 1 対 1 で対応付けてページに表示します。レンダリング プロセスを次の図に示します。
ブラウザのリフローと再描画操作は、レンダリング済みのコンテンツを変更するため、ブラウザ エンジンの負荷とパフォーマンスの低下を招きます. したがって、DOM での頻繁な操作を削減する限り、Web アプリケーションのパフォーマンスの最適化を実現できます. . JavaScript を使用して、アプリケーション ページ全体のすべてのノードをシミュレートすることができます.ページが変更された後、JavaScript はページ変更の前後の違いをシミュレートし、ページをレンダリングします.これが、この記事で紹介する仮想 DOM です.
3. 仮想DOMの実装プロセス
1) ページが初めて読み込まれるときに、実際の DOM 構造に従って、JS を使用して仮想 DOM ツリーを模倣および構築し、これに基づいてアプリケーション ページをレンダリングします。
2) ページ要素が変更された後、新しい変更に従って実際の DOM と仮想 DOM を比較し、違いを取得します。違いを素早く比較するにはDIFFアルゴリズムが必要 一般的に言って2つのDOMツリーを完全に比較するために必要な計算量は非常に大きい 一般的なフロントエンドページの場合、同じレベルのノード同士を比較する限りそれでおしまい。
3) プロセス 2) で差分オブジェクトを記録し、それを実際の DOM に適用すると、ブラウザーはページを再レンダリングしてページを更新します。
4.まとめ
ページを頻繁に再レンダリングする必要がある場合、仮想 DOM テクノロジーは差分ノードを効率的に見つけてレンダリングを完了することができます。ただし、ページが頻繁に更新されない場合のレンダリング速度は、DOM を直接操作する速度に似ており、ノードの変更が非常に小さいページの速度でさえ、DOM を直接操作する速度には及びません。したがって、日常の開発作業では、さまざまな開発プロジェクトが、対応する需要タイプに応じて適切な運用技術開発を選択する必要があります。