4 ms·

Please correct me if I'm off base here, but isn't a big part of the whole virtual-dom abstraction performance? Direct DOM updates are slow (rerender), diffing

Please correct me if I'm off base here, but isn't a big part of the whole virtual-dom abstraction performance? Direct DOM updates are slow (rerender), diffing and smart patching much faster. There must be a reason for virtual doms becoming so popular, even for frameworks that don't have a 'functional' approach like React.

rich_harris 10y ago
Great question! It's a very common misconception that an app that uses virtual DOM diffing somehow manages to be faster than an app that manipulates the DOM directly. Re-rendering your entire app (i.e. creating all the nodes from scratch with innerHTML or document.createElement) is too slow for a lot of apps, and is a bad idea for lots of other reasons (losing state in form elements, etc). Virtual DOM just gives you a way to write your app as though you were re-rendering it from scratch, while still being fast enough that you can get away with it. Svelte is significantly faster than React according to https://github.com/krausest/js-framework-benchmark https://github.com/krausest/js-framework-benchmark, because it's taking a more direct approach to the same goal — updating existing elements or only creating/destroying them as necessary. It's also faster than Ember, Angular, Vue, etc. It's not yet quite as fast as Inferno, but it uses less memory.
proyb2 10y ago
Agreed with Rich, it's a misconception that virtual-dom is faster, web browsers have made significant improvement to DOM. There must be a reason why vanilla Javascript is fastest than most virtual-dom. Inferno-1.1.0 have an error at runtime, could not test JS Framework right now. Sveltejs works.
- trueadm 10y ago
  What issue did you have with Inferno, would mind reporting it please so we can fix it? :)
  - proyb2 10y ago
    Inferno in JS framework replies use beta, I guess that broken.
tobr 10y ago
Virtual DOMs are used to make the rerender-everything-all-the-time approach acceptably fast, which is desirable since that approach tends to lead to nice UI code with few state related bugs. Still, this is a pretty costly way to update the UI, as the virtual DOM causes a lot of memory churn.

rich_harris 10y ago

Great question! It's a very common misconception that an app that uses virtual DOM diffing somehow manages to be faster than an app that manipulates the DOM directly. Re-rendering your entire app (i.e. creating all the nodes from scratch with innerHTML or document.createElement) is too slow for a lot of apps, and is a bad idea for lots of other reasons (losing state in form elements, etc). Virtual DOM just gives you a way to write your app as though you were re-rendering it from scratch, while still being fast enough that you can get away with it. Svelte is significantly faster than React according to https://github.com/krausest/js-framework-benchmark https://github.com/krausest/js-framework-benchmark, because it's taking a more direct approach to the same goal — updating existing elements or only creating/destroying them as necessary. It's also faster than Ember, Angular, Vue, etc. It's not yet quite as fast as Inferno, but it uses less memory.

proyb2 10y ago

Agreed with Rich, it's a misconception that virtual-dom is faster, web browsers have made significant improvement to DOM. There must be a reason why vanilla Javascript is fastest than most virtual-dom. Inferno-1.1.0 have an error at runtime, could not test JS Framework right now. Sveltejs works.

trueadm 10y ago
What issue did you have with Inferno, would mind reporting it please so we can fix it? :)
- proyb2 10y ago
  Inferno in JS framework replies use beta, I guess that broken.

tobr 10y ago

Virtual DOMs are used to make the rerender-everything-all-the-time approach acceptably fast, which is desirable since that approach tends to lead to nice UI code with few state related bugs. Still, this is a pretty costly way to update the UI, as the virtual DOM causes a lot of memory churn.