Vue.jsの仮想DOMとは何か?通常のDOMとはどう違うか？

387 回閲覧されました

公開日 : 2022年11月25日

みなさんこんにちは、WEB制作のエンジニアのjonioです。

私はVue.jsが大好きでこのブログを作りましたが仮想DOMについて存在しか知らない状態でした。

さすがにこれはいけないと思って仮想DOMについて調べました。

Vue.jsが好きなのに仮想DOMを知らないってまずいですよね。

通常のDOMとは？

HTML、CSSでコーディングしますがこれで通常のDOM(生DOMとします)を作ってブラウザ上に表示します。

DOMはDocument Object Modelの略でコーディングする事によってブラウザ上に表示される物です。

↓のコーディングをしたとします。

すると↓の階層構造(DOMツリーと言います)を作ります。

header・h1とかの1つ1つの要素をノードといいます。

そしてDOMツリーができたらブラウザ上に表示します。

クリックしたら表示が変わるとかマウスオーバーしたら背景色が付くとかをJavaScriptやjQueryで操作(DOMを叩くと言います)できます。

生DOMのデメリットはWEBページを変更する度にDOMツリーを全て読み込む点です。

DOMツリーを全て読み込むのでページが長くなればなるほどDOMの読み込み時間が長くなってページの表示速度が遅くなりそこにJavaScriptやjQueryを使うと余計読み込みが発生するのでページの表示が遅くなります。

ページの表示を遅くする原因の読み込みを減らすことができるのが仮想DOMです。

2以外は生DOMの時と同じなので2について説明します。

仮想DOMは2つあって更新前と更新後があります。

HTMLの書き換えを行うとDOMの更新が行われますがDOMの更新前と更新後のズレが出てこれを差分と言い生DOMで全てのDOMを読み込むのに対して仮想DOMでは差分のDOMのみを読み込みんでブラウザに表示します。

読み込みの量が少ないのでブラウザを表示する速さが上がるという事です。

これをVue.jsやReact.jsで行う事ができるから人気があるのだと思いますがVue.jsは記述の量がReact.jsに比べて少ないので学習が楽でのめり込みました。