Virtual DOM

이 글은 Virtual DOM(가상 Document Object Model)에
관한 내용을 정리하기 위해 작성하였습니다.

---

< DOM >

In usually, Whenever the browser detects a change to the DOM,
it repaints the entire page using new version of the DOM.

-> It's too Time-Consuming!

(Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen.)

 

So, To prevent unnecessary repaints(Only repaints updated elements), The Virtual DOM is comes in.

 

 

---

< How To?>

Some front-end frameworks like view and react create their own representation of the DOM as a javascript object.

 

Whenever a change is going to be made to the DOM,

the framework instead makes a copy of this javascript object,

makes the change to that copy and compares the two javscript object to see what has changed it.

 

Then, informs the browser of these changes and only those parts of the DOM are repainted.

The copy of the DOM is stored in memory as a javascript object is called Virtual DOM

 

< Why we use Virtual DOM? >
attempting to repaint the whole page for each one makes site slow and buggy.
Using a Virtual DOM allows us to only repaint what is necessary creating even more amazing user experience