2016-07-12 1 views
3

フロントエンドのWeb開発では、多くのフレームワークが仮想DOMソリューション(React https://www.npmjs.com/package/virtual-domのvirtual-domなど)を好んでいます。通常、引用された設計上の理由により、DOM操作をフロントエンドレンダリングのボトルネックとする問題が回避されます。仮想DOMをブラウザのネイティブDOMよりも優れたものにする要因は何ですか?

  • 現在のブラウザではDOM操作が遅いため、仮想DOMソリューションではパフォーマンスが向上するのはなぜですか?

  • このボトルネックを解消するためにブラウザー自身が実行できる(実行中の)点は何ですか?ブラウザ自体はバッチ風のDOM APIを開発していないでしょうか?ポインタとして

、私は、実行時にはネイティブDOM操作コードにJIT'ed、JavaScriptから跳躍する必要があるとき、コンテキストスイッチとは何かかもしれないと感じ、私は決定的な答えを見つけたことがありませんこれに。

+0

DOMは遅くはない、それは現代の神話のようです。 React a)によって採用された「仮想DOM」はより宣言的ですb)常に起こっているコンポーネントの完全な再作成をよりうまく処理します。 – Bergi

+2

要するに、DOM APIはバッチ処理をサポートしていません。すべてが即時モードで実行され、遅いです。 – ssube

+3

@ssube:「すべて」とは何か?リフローと再描画は、ネイティブDOMで確実にバッチ処理されます。 – Bergi

答えて

-3

Domを再ペイントしてリフローするたびに操作が行われます。

可視性を変更するエレメントスキンに変更が加えられたときに再レイアウトが行われますが、レイアウトには影響しません。この例には、アウトライン、可視性、背景色などがあります。

バーチャルドームは、常に最小限にDomを更新していることを確認します。

バックボーンやjqueryを使用してサイトを構築するフレームワークでは、htmlを挿入してdomを更新するだけで、以前のhtmlと反応して関連するhtmlのみを更新するだけです。

Virtual Domは単なるパッチであり、あなたのページの大部分を更新するよりも良いパッチです。

+2

ありがとうございます。だから私の質問は、ブラウザ自体が、余分なフローを引き起こさずにページの大部分を更新できるAPIを持つことを妨げるものです。これは現代のフロントエンド開発にとって大きな懸念事項であるように思われる。 –

+5

この回答は間違っています。 [毎回*毎回発生しません](http://stackoverflow.com/q/510213/1048572)。 – Bergi

+0

ネイティブDOMの速度が遅くないため、React(Virtual DOM)以前のライブラリでは、DOMの再描画が多く発生していました。 以下の記事では、より良い方法で説明しています。 - https:// auth0。com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/ - http://teropa.info/blog/2015/03/02/change-and-its-detection-in -javascript-frameworks.html –

関連する問題