実DOMを操作するよりも仮想DOMを使ったほうが速いという話をききますが、
実際に早くなる理由がいまいちよくわかりません。
変更前と変更後を比較して差分を変更するから、という説明を聞くと納得しそうになりますが、
DOM全体でなく、DOMの一部を再レンダリングするブラウザの機能ををうまいこと使うという意味なのでしょうか。
そういった場合にどういったjavascriptの関数が実行されるのかなど、教えていただけると助かります。
よろしくお願いします。
実DOMを操作するよりも仮想DOMを使ったほうが速いという話をききますが、
実際に早くなる理由がいまいちよくわかりません。
変更前と変更後を比較して差分を変更するから、という説明を聞くと納得しそうになりますが、
DOM全体でなく、DOMの一部を再レンダリングするブラウザの機能ををうまいこと使うという意味なのでしょうか。
そういった場合にどういったjavascriptの関数が実行されるのかなど、教えていただけると助かります。
よろしくお願いします。
ぐぐってみると、この言葉の出所としては「リアルな DOM はなぜ遅いのか」という記事あたりではないかと思います。
仮想DOMを使っても、仮想DOMから実DOMを操作しているわけで、最適化されたJavaScriptを使って実DOMを操作するよりも速くなることはありません。
この言葉の意味は、仮想DOMを使った場合は、フロント実装者が気にしなくても差分のみをレンダリングしてくれるので高速になる。使わない場合は、実装者がDomの差分を考えて、コードを組む必要があるが最適なコード書くのは難しいということです。
詳しくは、記事を読んでもらうのが一番いいと思いますが、正確ではないですが要約すると次のようになります。
レンダリングは、次のような処理をしていて、ブラウザーの表示では一番重い処理になる。
それで、ブラウザーの表示を速くしようと思えば無駄なレンダリングの処理を減らすのが一番効果的で、「仮想DOM」を使うことで、差分アルゴリズムを使って実際のDOMに必要な変更のみ適用することでそれを実現している。
JavaScriptは結構速いので、「仮想DOM」を作成するのにはそれほど時間を必要としない。また、「仮想DOM」を最初に使ったのがReact.js
で、React.js
は頑張って「仮想DOM」に多くの工夫をして高速な処理ができるようにしたことから「仮想DOM」は速いという評価になった。ただし、ブラウザ側も「実DOM」の高速化の努力をしているので、現在では当時ほどの違いはなくなっている。