> 初心者でもわかるように簡単に説明これよく使われるけど、初心者でも分かるようにするためにはいちいち詳細を示さなければいけないし、「簡単に」はならないってことを、初心者は知っておくべき。とりあえず。DOMとは何かについてhttps://eng-entrance.com/what-is-domと、仮想DOMが何で必要かについてhttps://qiita.com/risagon/items/019942c60e9c3e6c05a5をまとめているページがあるので、それを読め。理解できないところがあったら言え。
Re:2 これもおすすめよhttps://postd.cc/the-inner-workings-of-virtual-dom/
Re:2 兄貴、ありがとうございます！
Re:3 姉貴もありがとうございます！
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で簡単にベンチ取れるから試してみると面白いかもね。
Re:6 兄貴！ありがとうございます！jquery大好きなんでわかりやすい！
6 件の回答
> 初心者でもわかるように簡単に説明
これよく使われるけど、初心者でも分かるようにするためにはいちいち詳細を示さなければいけないし、「簡単に」はならないってことを、初心者は知っておくべき。
とりあえず。
DOMとは何かについて
https://eng-entrance.com/what-is-dom
と、
仮想DOMが何で必要かについて
https://qiita.com/risagon/items/019942c60e9c3e6c05a5
をまとめているページがあるので、それを読め。理解できないところがあったら言え。
Re:2
これもおすすめよ
https://postd.cc/the-inner-workings-of-virtual-dom/
Re:2
兄貴、ありがとうございます！
Re:3
姉貴もありがとうございます！
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で簡単にベンチ取れるから試してみると面白いかもね。
Re:6
兄貴！ありがとうございます！jquery大好きなんでわかりやすい！