There are many questions and blogs on the Internet trying to explain what a virtual home is, but this question is related to why such optimization should be implemented in JavaScript / as part of the structure, and not through the browser itself.
The virtual DOM, as I understand it, is a tree consisting of Javascript objects with parents / children, etc., but without most of the "heavy" functions of the real DOM. Frameworks (like React / Vue) respond to model state changes by creating a virtual DOM from scratch, and then make the difference in the latest version of their virtual DOM to determine which real DOM to change.
Many of the things I read claim that the virtual DOM is faster because the real DOM needs to re-compose (or even re-draw) each time there is a change, but it isn’t - re-layouts are only required when part of the JS is The code explicitly requests a specific style / text stream value (e.g. height / width, etc.). And, apparently, most infrastructures that use virtual DOMs cannot do this better, except that developers are not accidentally doing this.
In addition, at some point recently browsers have been considering the possibility of creating event hooks for a DOM mutation, but this idea was abandoned, which means there should not be any events fired at the DOM point mutated.
So my question is: what does this leave in terms of benefits? What additional information, or additional freedom, does the JS structure have that gives it “logical” power to perform virtual DOM optimization?
source
share