9

実DOMを操作するよりも仮想DOMを使ったほうが速いという話をききますが、
実際に早くなる理由がいまいちよくわかりません。

変更前と変更後を比較して差分を変更するから、という説明を聞くと納得しそうになりますが、
DOM全体でなく、DOMの一部を再レンダリングするブラウザの機能ををうまいこと使うという意味なのでしょうか。

そういった場合にどういったjavascriptの関数が実行されるのかなど、教えていただけると助かります。

よろしくお願いします。

1

1 件の回答 1

7

ぐぐってみると、この言葉の出所としては「リアルな DOM はなぜ遅いのか」という記事あたりではないかと思います。

仮想DOMを使っても、仮想DOMから実DOMを操作しているわけで、最適化されたJavaScriptを使って実DOMを操作するよりも速くなることはありません。

この言葉の意味は、仮想DOMを使った場合は、フロント実装者が気にしなくても差分のみをレンダリングしてくれるので高速になる。使わない場合は、実装者がDomの差分を考えて、コードを組む必要があるが最適なコード書くのは難しいということです。

詳しくは、記事を読んでもらうのが一番いいと思いますが、正確ではないですが要約すると次のようになります。

レンダリングは、次のような処理をしていて、ブラウザーの表示では一番重い処理になる。

  • スタイルの引き当てを含むレンダリングツリーの構築
  • レンダリングツリー上でのレイアウト計算
  • そしてレイアウト結果に基づく画面のペイント

それで、ブラウザーの表示を速くしようと思えば無駄なレンダリングの処理を減らすのが一番効果的で、「仮想DOM」を使うことで、差分アルゴリズムを使って実際のDOMに必要な変更のみ適用することでそれを実現している。

JavaScriptは結構速いので、「仮想DOM」を作成するのにはそれほど時間を必要としない。また、「仮想DOM」を最初に使ったのがReact.jsで、React.jsは頑張って「仮想DOM」に多くの工夫をして高速な処理ができるようにしたことから「仮想DOM」は速いという評価になった。ただし、ブラウザ側も「実DOM」の高速化の努力をしているので、現在では当時ほどの違いはなくなっている。

2
  • ていねいな説明ありがとうございます。 仮想DOMを使った場合は、フロント実装者が気にしなくても差分のみをレンダリングしてくれるので高速になる。 使わない場合は、実装者がDomの差分を考えて、コードを組む必要があるが最適なコード書くのは難しいということですね。
    – user29292
    Commented 2018年7月14日 8:13
  • @user29292 さん、回答になっていなかったご投稿をコメントに変換しました。また、もし質問者の user29289 さんと同一人物なのであれば、アカウントが 2 つに分かれてしまっておりますので、こちらのヘルプからアカウントをご統合ください。質問者本人のアカウントであれば、回答にコメントしたり、回答を承認したりすることができるようになります。user29292 さんのアカウントからだと信用度が低くコメントできないはずです。
    – nekketsuuu
    Commented 2018年7月15日 6:06

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。