Proposal to add efficient DOM diffing to browser | Hacker News Reader

Proposal to add efficient DOM diffing to browser

github.com

3 pointsapexedison3 comments

A related proposal can also be found here: https://github.com/whatwg/dom/issues/270

I'm curious why this hasn't made it to the browser yet and doesn't seem to be explored very seriously. So many web-frameworks revolve around trying to address this issue, why not get rid of the overhead or at least reduce it?

It's not certain that doing the work in batch will be much faster.

The reason React &al benefit from dom diff technique so much is because, too often, web developers either (a) entirely rewrote the dom (bad) or (b) would mix reads and writes/modifies (which causes the browser in many cases to have to "draw" the dom to read layout stuff, even though more writes are about to happen.

React tries to keep the browser in it's fast mode, by applying operations in bulk. There's not much perceived value in creating an API that implements that: we already can do that, React does it. We can leave it to libraries to find their own strategies for optimal DOM usage, like React has done. Making new constructs that do what we already can do seems like a risk: it adds complexity to the platform, that right now, the platform can healthily leave to 'userland'.

Simply letting the user do whatever, then apply that in bulk seems like a bad thing to encourage. It's basically the (a) pattern above: just keep rewriting stuff, but hope someone makes you doing a bad job fast. Which React did. For which there are other libraries too, for example Snabbdom[1].

Thanks for the link!! Great historical context.

[1] https://github.com/snabbdom/snabbdom

If by faster you mean faster than React I think there is evidence it can be. The author of the issue writes lots of dom utility and rendering libraries and I believe domdiff is more or less what he describes in the post:

https://github.com/WebReflection/domdiff

You can find it placed way above React in the usual JS rendering benchmarks:

https://rawgit.com/krausest/js-framework-benchmark/master/we...

Now it's not entirely clear whether these benchmarks convey something meaningful except for maybe the point that most frameworks are quite fast. That being said I think it's developer experience that really stands to improve. Thinking of view as a pure function of state was a great innovation, but existing implementations can end up fracturing the view into virtual doms and non-virtual. Then you end up with problems like D3 and React not coexisting.

I feel like I heard something from the lit-html folks that a long term aspiration was to integrate some learnings from the project into chrome, but I haven't been able to find where again.

There has been a trend in JS with libraries becoming idiomatic to the language to later have the issues they targeted be addressed natively (a la JQuery).

In general, I definitely appreciate your point about adding complexity to the platform, but I think when it comes to web technologies that ship has long sailed. I really see it as an opportunity to bring a lot of simplicity, chiefly filling that void that's birthed a billion JS frameworks.

Thanks for the thoughtful comment.

Reply on news.ycombinator.com