仮想DOMと差分アルゴリズムの研究ノート

仮想DOMとは何ですか

このオブジェクトの構造を記述するためのDOMオブジェクトは、仮想DOMです。

なぜ仮想DOMを使います

操作は、DOMのパフォーマンスがかかるため、属性やメソッドDOMの何百もあります。仮想DOMの変更の実部を計算し、そして唯一のネイティブ操作部DOMのためではなく、ページ全体を再レンダリングのDOM操作を低減することができ、
Hは、DOM、属性、子ノード、テキストの種類に応じた方法です。仮想DOMの生成
createElementのパラメータ受け入れh.jsすることがあります。type、小道具、...子供、 createElementの、 小道具から削除キーの後に、vノードの呼び出し(タイプ、キー、小道具、子供を)、vノードは、 オブジェクトを返します。 。
レンダリング(vノード、コンテナ)メソッドはtrueを仮想ノードノードになります。最新に算出したテキスト要素の属性比較の種類、古いプロパティと新しいプロパティの違い、参照、割り当てられたDOM。

どのように比較?

あなたが入力した場合、キーは古いノードオフ新しいノードに置き換え、同じ、直接のreplaceChildではありません。
タイプ、同じキー、すべてのテキストタイプ、直接のTextContent修正する
アップデート古いノードは、新しいノードの属性に応じた属性タイプ、キーを、ノードタイプですが、小道具よりも、子どもたちに比べて、(古いノードは、新しいノードではない持っています- 「innerHTMLの古いノードを削除し、古いノードが新しいノードを持っていない- 」新しいノードに子ノードを追加するために、古いノードは、新しいノードが持っている- 「updataChildren
updataChildrenの
古いものと新しいノードのマークは、開始と終了のポインタ、5例では、新しいヘッドノード-古いノード新しいエンド・ノード-新しい最初のノードのノード古いテール-新しいエンド・ノードノード旧尾-古いノード、暴力的なコントラスト(マップ構造、古いノードの子ノードがあるかどうかを確認するには、はい、移動、追加されていない場合。)

おすすめ

転載: www.cnblogs.com/superlizhao/p/12635479.html