😆

DOM, 仮想DOMとは結局何ものか?

3 min read

Reactを学習していて、「ReactはDOMを仮に構築する仕組みを備えており、仮想DOMを設計してからリアルDOMを作成する」と書いてあり、仮想DOMって何ものなの?DOMってそもそもなんだったっけとなっていたのでまとめてみました。

そもそもDOMってなに?

公式にはこう書かれています。

Document Object Model (DOM) は HTML や XML 文書のためのプログラミングインターフェイスです。ページを表現するため、プログラムが文書構造、スタイル、内容を変更することができます。 DOM は文書をノードとオブジェクトで表現します。そうやって、プログラミング言語をページに接続することができます。

https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction#what_is_the_dom

簡単に言うと、JavascriptからHTMLドキュメントを操作するためにAPI(インターフェイス)のことです。(正確にはXMLドキュメントも扱うことができます)。
DOMのおかげで、JavascriptからHTMLドキュメントを操作し、ボタンクリック時のイベント登録や、スタイル・属性の変更、要素のサイズを取得といったことが可能となります。
DOMはリアルDOMとも呼ばれます。

DOMツリーについて

Webブラウザでは、HTMLドキュメントの各要素をオブジェクトとして扱い、そのオブジェクトを下図のようにツリー状にして管理しています。
https://eh-career.com/engineerhub/entry/2020/02/18/103000 参照

このツリーを、DOMツリーと呼びます。また、ツリーの要素/オブジェクトひとつひとつを、Nodeと呼びます。
仮想DOMもリアルDOM同様に、Nodeをツリー状にして管理しています。

混乱しがちなDOM、Node、そしてElementを理解する

DOM,Node,Elementは下図のような継承関係にあります。

https://eh-career.com/engineerhub/entry/2020/02/18/103000 参照

Nodeとは

DOMツリーにおけるひとつひとつの箱(オブジェクト)がNode
firstChildやparentNodeなどのプロパティ、appendChildやremoveChildなどのメソッドを提供しています。
Nodeの種類
• Document
• Element
• Attr
• CharacterData

Elementとは

Nodeにはいくつもの種類がありました。Elementも、Nodeの中の1つです。ClassListやinnerHTMLなどのプロパティ、getElementByidやsetAttributeなどのメソッド(各オブジェクトに属する処理や操作のこと)を提供しています。

HTMLの要素は、Elementを継承してます。

https://eh-career.com/engineerhub/entry/2020/02/18/103000 参照

DOMとNodeとElementの関係について

DOM、Node、Elementは継承関係にあり、下図のような構造になっています。

https://eh-career.com/engineerhub/entry/2020/02/18/103000 参照

仮想DOMとレンダリングのコストについて

WebブラウザがDOMツリーを持っているのは、HTMLドキュメントをレンダリング(コンテンツをブラウザの画面に表示するための処理を行う)ためです。DOMを無秩序に操作すると、その都度以下のような処理が実行されます。

ブラウザの仕組みhttps://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/#The_browser_main_functionality 参照

  1. DOMツリーを再構築する
  2. DOMツリーとCSSOMツリー※を組み合わせてレンダリングツリーを構築する
  3. レンダリングツリーでレイアウトを行い、各Nodeの位置やスタイルを計算する
    レイアウト結果をもとに描画する
    ※ CSSOM: CSS Object Modelの略で、CSS版DOMのようなものです。

レンダリングフローを見てわかるように、レンダリングはブラウザにとってとてもコストの高い処理です。レンダリングコストを減らす最適な方法は、無駄なレンダリングをなくすことです。
そこで仮想DOMの技術が生まれました。

仮想DOMって何ものなの?

答えは、Javascriptのオブジェクトです。
JavascriptのオブジェクトでリアルDOMを仮想的に作って、さらに変更箇所だけ差分検知し更新することができます。

https://eh-career.com/engineerhub/entry/2020/02/18/103000 参照

1.オブジェクトを2つ用意する
2.片方のオブジェクトをJavascriptで操作する
3.変更前と変更後のオブジェクトを比較する
4.差分があったところだけをリアルDOMに反映する
5.反映されたリアルDOMをブラウザがレンダリングする

最終的にはリアルDOMが操作を行いブラウザに反映することになるのですが、基本的にリアルDOM操作の場合リアルDOMが変更するたびにブラウザがHTMLを解析し、レンダリングを行うので表示するのに時間がかかってしまいます。(レンダリングコストが高くなる)

また他にも仮想DOMを使うメリットとして以下のことが挙げられます。
・UI(見た目)とロジックを分離することができる
・状態を管理することが簡単になる
・UIとロジックを繋ぐ処理が簡単になる

一般的には仮想DOMのほうがリアルDOMよりも描画が速いと言われていますが、差分比較を行う処理にもかなりの処理が行われており、差分が膨大になればなるほど処理が重くなってしまいます

アプリケーションを作成時にはReactやVueが本当に必要かどうかを判断しましょう。
判断材料としては状態管理が複雑であるかが重要となります。

Discussion

ログインするとコメントできます