仮想DOMを初心者でもわかるように簡単に説明してください。また、なんのために必要なのか？よろしくお願いいたします。

2:ID:8M1VnK · 2018-11-06

> 初心者でもわかるように簡単に説明
これよく使われるけど、初心者でも分かるようにするためにはいちいち詳細を示さなければいけないし、「簡単に」はならないってことを、初心者は知っておくべき。

とりあえず。

DOMとは何かについて
https://eng-entrance.com/what-is-dom

と、

仮想DOMが何で必要かについて
https://qiita.com/risagon/items/019942c60e9c3e6c05a5

をまとめているページがあるので、それを読め。理解できないところがあったら言え。

3:ID:8ggCip · 2018-11-06

Re:2
これもおすすめよ
https://postd.cc/the-inner-workings-of-virtual-dom/

4:ID:PyL1jj · 2018-11-06

Re:2
兄貴、ありがとうございます！

5:ID:PyL1jj · 2018-11-06

Re:3
姉貴もありがとうございます！

6:ID:5hDcoi · 2018-11-06

DOMの捜査、変更はコストが高い。
だから、DOMへのアクセスは最小限にした方がコストが安くなるよね！っていう話で理解してる。
つまり、計算はメモリ上のDOM(仮想DOM)で行い、計算の結果として仮想DOMと実DOMをごっそり入れ替えるっていう手法。ものすごく語弊のある比喩をみんな大好きjQueryで表現するなら、

for(i = 0;i<10000;i++) $("body").append("<p>" + i + "</p>");

ってやるより、

html = "";
for(i = 0;i<10000;i++) html += "<p>" + i + "</p>";
$("body").append(html);

としたほうが、DOMへのアクセスが1回で済むから高速だよねってことに近いんじゃないかと。
上の例であれば、console.timeで簡単にベンチ取れるから試してみると面白いかもね。

7:ID:PyL1jj · 2018-11-06

Re:6
兄貴！ありがとうございます！jquery大好きなんでわかりやすい！

コメントの受付は終了しました。

#vue.js 仮想DOMを初心者でもわかるように簡単に説明してください。また、なんのために必要なのか？よろしくお願いいたします。

6 件の回答

一緒に読まれている質問