7788この知識を記録するために記録、仮想DOMの今日を開始するための知識の漠然とした、毎週の概要
リスト1:仮想DOMとは何ですか?
TAは、オブジェクト、シミュレート対象のDOMツリーで含まれ tag
、props
、children
3つのプロパティ
<DIV ID = "アプリ"> <Pクラス= "テキスト"> Hello Worldの!!! </ P> </ div>
HTML上の仮想DOMは以下に変換しました:
{ タグ: 'DIV' 、 小道具:{ ID: 'アプリ' }、 chidren:[ { タグ: 'P' 、 小道具:{ クラス名: 'テキスト' }、 chidren:[ 'のHello World!' ] } ] }
LIST2:彼は問題を解決するために使用されていますか?
DOMは、パフォーマンスの問題が設計されている解決するために、仮想ブラウザです。例えば、我々はこの時点でDOM操作を更新するために、一つの操作を3回を持ってすぐにページ更新のための仮想DOM DOMを操作しないだろうが、JSがオブジェクトをローカルにこれら三つのアップデートの内容を保存するには、オブジェクトは、1回の更新となります実際のDOMツリーに、不必要な計算の多くを避けるために、描画するブラウザに引き渡さ。
追加:多くの人々は、仮想DOMの最大の利点は、実際のDOMのJavaScriptのパフォーマンスもたらしたオペレーションの消費量を低減する差分アルゴリズムだと思います。これは、すべてではなく、仮想DOMを持参するのが有利ではあるが。仮想DOM最大の利点は、最近のアプレットでは非常に高温になることができますすることができ、クロスプラットフォームの機能だけではなく、ブラウザのDOMを達成するために、元の抽象レンダリング処理でAndroidとiOSのネイティブの構成要素であってもよいです様々なGUI。(ピースの最大の利点は、理解されるにコピーすることは非常に徹底的ではありません)
LIST3:ル大オーバーヘッドDOMを待ち、なぜ質問弱い弱い業績?
実際には、代わりに大きなオーバーヘッドDOMツリーが、モジュールのDOMツリーとJSモジュールを照会これらのモジュール間の通信から分離され、オーバーヘッドが追加されます。電話ムラパフォーマンスは、パフォーマンスの問題が特に顕著である一方、DOMの操作と相まっては、ページが世界の今日の人気モバイル最後に、巨大なパフォーマンス・オーバーヘッドを作り、再描画や逆流するようになります。
List4:仮想DOMはルのパフォーマンスを向上させるためにどのようにしていること?
DOMは、比較アルゴリズムの差分ネイティブオブジェクトのJavaScriptによって、変更された場合、DOMを変更する必要がある計算、DOMを変更する代わりに、全体のビューを更新するのみ動作
List5:どのように仮想DOMルにHTMLに変換するには?
今日の仮想DOMライブラリの主流の観察snabbdom、仮想-DOMは、内で反応は通常ある関数h、そこにある React.createElement
だけでなくVueのメソッドをレンダリングするように、 createElement。而React 是通过 babel 将 jsx 转换为 h 函数渲染的形式,而 Vue 是使用 vue-loader 将模版转为 h 函数渲染的形式,整个h函数返回的就是虚拟DOM的对象
TO DO:フォローアップは再び補うためにdiffのアルゴリズムを伴います
参考文献:
1) https://juejin.im/post/5c051597e51d45517b0cf7e6 (仮想DOMとは何ですか)
2) https://efe.baidu.com/blog/the-inner-workings-of-virtual-dom/ (Vitual DOMの内部の仕組み)
3) https://juejin.im/post/5d085ce85188255e1305cda1#heading-1 (最終的には仮想DOMあるもの)
4) https://juejin.im/post/5d36cc575188257aea108a74#heading-14(詳細な分析:仮想DOMのヴューコア)