The key difference between DOM and Virtual DOM is that Virtual DOM is lightweight and in-memory, whereas DOM is the actual structure of the web page. Updating the Virtual DOM is much faster than updating the actual DOM, as it requires fewer resources.
So, where precisels does the DOM reside? Yes: also in memory... And the DOM is pretty fast and efficient too.
This is belive of many REACT users that VDom is fast, but it is not true. VDOM brings you a lot of overhead, and every operation to be performed on the DOM has to be performed on the VDOM first, so i doubles your effort. In fact, even if you do not change anything, the VDOM might force you to compare the whole DOM tree, which needs a lot of calculation power. So, it is only a fairy tail that VDOM is fast.
BUT: Dom Manipulation is only a small part of the work of a browser. After the DOM was changed, the browser has to reRender the page, and this is the really slow task. It often takes a factor of 10-1000 longer than the pure DOM manipulation.
So: you can save some time, if the VDOM prevents you from unnecessary redraws. But today there are many frameworks out there, that have a better approach than the "brute force DOM diffing" implemented in REACT. Svelte compiles the redraw logic, so all the DOM manipulation can be more precise. But even if we use frameworks like VanJS, that work directly on the DOM, we find that browsers handle DOM redraw very efficient, so it is not clear if VDOM still has any advantage. It just helps you to continue to write bad designed web applications, that do not care for state changes at all...
VDOM diffing + bulk DOM manipulation beats DOM diffing + DOM manipulation, in part because abstracting away the DOM intricacies and collecting changes before applying them helps. But it's vastly slower than targeted DOM manipulations, and the optimizations that went into DOM render cycles have reduced the drawbacks of direct DOM operations significantly.
Nothing beats tailored solutions on performance, and frameworks that try to approximate those tailored solutions will necessarily beat the React approach. React does have its benefits, but they're rapidly dwindling, so the main reason to keep using React ends up being the established legacy - more mature ecosystem, more retained experience, more existing codebases.
For new blank slate projects, svelte is quickly becoming the tool of choice, and for good reason (much as I personally have at this point too much fatigue to make another technology switch for a while).
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
So, where precisels does the DOM reside? Yes: also in memory... And the DOM is pretty fast and efficient too.
This is belive of many REACT users that VDom is fast, but it is not true. VDOM brings you a lot of overhead, and every operation to be performed on the DOM has to be performed on the VDOM first, so i doubles your effort. In fact, even if you do not change anything, the VDOM might force you to compare the whole DOM tree, which needs a lot of calculation power. So, it is only a fairy tail that VDOM is fast.
BUT: Dom Manipulation is only a small part of the work of a browser. After the DOM was changed, the browser has to reRender the page, and this is the really slow task. It often takes a factor of 10-1000 longer than the pure DOM manipulation.
So: you can save some time, if the VDOM prevents you from unnecessary redraws. But today there are many frameworks out there, that have a better approach than the "brute force DOM diffing" implemented in REACT. Svelte compiles the redraw logic, so all the DOM manipulation can be more precise. But even if we use frameworks like VanJS, that work directly on the DOM, we find that browsers handle DOM redraw very efficient, so it is not clear if VDOM still has any advantage. It just helps you to continue to write bad designed web applications, that do not care for state changes at all...
VDOM diffing + bulk DOM manipulation beats DOM diffing + DOM manipulation, in part because abstracting away the DOM intricacies and collecting changes before applying them helps. But it's vastly slower than targeted DOM manipulations, and the optimizations that went into DOM render cycles have reduced the drawbacks of direct DOM operations significantly.
Nothing beats tailored solutions on performance, and frameworks that try to approximate those tailored solutions will necessarily beat the React approach. React does have its benefits, but they're rapidly dwindling, so the main reason to keep using React ends up being the established legacy - more mature ecosystem, more retained experience, more existing codebases.
For new blank slate projects, svelte is quickly becoming the tool of choice, and for good reason (much as I personally have at this point too much fatigue to make another technology switch for a while).