i have been reading many articles over this. as per my understanding, virtual DOM is simple javascript object representation of real DOM. whenever some state change happens, new Virtual DOm object is created and compared with old one using diff algorithm in o(n) time and updates the browser only the changed parts. my question is , why didn't browsers do this themselves.?
also i tried checking differences between vanilla and react by using simple key press inside a text field using chrome devtools. vanilla js and react have following traces under Main have following steps.
- event: key press //both have
- event: textInput //both have
- recalcualte style// both have
- Layout// only vanilla js has, React version doesn't have this step ??
- update layer tree// both have
- Paint.//both have
my question for above observation is why react version doesn't have layout step which is taking 0.48 ms in vanilla. is this what causes react to be faster.
i also learned about layout thrashing and batch updates. as we don't interact with browser using DOM manipulation directly in React, batch update logic is undertaken by React. is this why react is efficient? so any new web developer needn't worry about effiecnt ways of updating browser(say like avoiding reflow/layout thrashing) instead focus on developing actual features and react does all for us?
it would be helpful if you can provide very basic demo example where virtual DOM has real advantage, i will use chrome devtools do the investigation myself. thanks :)
