4 ms·
> But there is no magic to a VDOM and speed There absolutely is. If you are using standard DOM APIs and are first changing the text of a <span> element, then c
by p-e-w 3y ago
> But there is no magic to a VDOM and speed
There absolutely is. If you are using standard DOM APIs and are first changing the text of a <span> element, then changing it back to what it was before (which can easily happen if your application logic is sufficiently complex, with multiple piecewise state changes impacting the UI), the browser will have to re-render the element twice, which means two full re-layouts unless the element is absolutely positioned or something.
By contrast, VDOM-based frameworks will detect that the DOM hasn't actually changed, and as a result, the browser doesn't have to do anything (other than update the VDOM).
That's indeed "magic", and makes a tremendous performance difference with complex applications in practice.
- samwillis 3y agoNo, in a correctly implemented pure DOM manipulation app you would update the DOM once to match your state, that's faster than building a VDOM and diffing it. Modifying the DOM twice, with an unintentional reflow and redraw between, would be a bug in your code. Yes, "if your application logic is sufficiently complex, with multiple piecewise state changes impacting the UI" is what a VDOM helps with from a developer perspective. But it isn't magically "faster". Personally I'm a fan of reactive frameworks such as Vue that do use a VDOM, but also by using a reactive state can do fine grain partial rendering of that VDOM for efficiency. Would I build an app without a (probably VDOM based) framework, no I wouldn't. Also note that the "fastest" frameworks, such as Solid, don't use a VDOM, they track state changes and do fine grade DOM manipulation to match it.
- TylerE 3y agoWho needs memory safety? Just correctly use malloc and free on every possible code path. Easy and simple!
- samwillis 3y agoVDOM isn't the equivalent of memory safety - such as using Rust over C, its much more similar to using a garbage collected high level language - such as Python or Ruby - over C. Your implied comparison doesn't work.
- chrisco255 3y agoVDOM has nothing to do with garbage collection. VDOM is a cache.
- FpUser 3y agoI do not use any frameworks for browser based JS/HTML front ends. Just plain JS and some domain specific libs when needed. No problems so far and the resulting GUIs are fast.
- treeman79 3y agoSo different from Netscape / internet explorer 3 days. Especially anything to do with corporate that insisted on ancient versions of Internet explorer. Can you write the app when you almost have to rewrite it and get it to work with Internet explorer
- azangru 3y ago> If you are using standard DOM APIs and are first changing the text of a <span> element, then changing it back to what it was before ... the browser will have to re-render the element twice As far as I understand, not if this all happens within a single browser layout/paint cycle [0] - [0] https://twitter.com/jaffathecake/status/1552242563654066176 https://twitter.com/jaffathecake/status/1552242563654066176