Last I saw, the lack of a direct WASM to DOM integration meant manipulating the DOM from WASM was roughly 10x slower.

See: https://github.com/rust-webplatform/rust-webplatform/issues/... for an example.

I wouldn't assume so unless you're comparing against a fairly naive JS implementation.

Copying strings between JS and asm.js/wasm is slow, so there's additional overhead just calling back and forth.

Reading through the C++ code it also uses std::string and std::map internally which are, well, somewhat slow and cache unfriendly. I'd expect the JS VM's types to generally beat these without too much effort (certainly the map, but the string depends on how its used and some other properties about it, e.g. if it's too big to fit in the small string buffer or etc).

Also, JS VMs have a much faster allocator than most malloc implementations, like the one bundled by emscripten (and this code doesn't seem to make much effort to avoid mallocs). They can/generally will implement the nursery as an arena and so you have a bump pointer allocation (which is only a small number of cycles for the common case). You pay for this later via GC, but the GC's are also fairly fast (with caveats, but I doubt they apply here for 99% of users).

TLDR: I wouldn't expect just using ASM.js or wasm to translate to a performance improvement for something like this. Of course, I could be totally wrong, but, well, there are no benchmarks...

That's a pretty good assessment.

I would note that emscripten's sdk comes with a really great malloc. If you're programming in C++ with a great malloc then your memory allocation performance will be better than what you'd get on the JS side. Be weary of microbenchmarks that try to say otherwise because the reason why malloc beats GCs for real shit is that it scales better. For example, GCs get slower if the heap shape gets weird, while malloc doesn't care about that.

Finally, WebKit's GC doesn't implement the nursery as an arena. I don't think that's such a popular GC technique anymore, particularly now that using non-compacting generational GCs is becoming so common.

Their benchmarks section just says this:

At the moment we haven't Benchmarks to show, but they'll come soon! Consider that benchmarking this library is not easy, we have to reproduce real world situations with big vnodes trees and frequent updates. Run a single patch or a sequence of patch in a for-loop might produce results that are not attributable to a real application.

"All interactions with the DOM are written in Javascript."

You can only be as fast as the slowest link.

Does it help for virtual dom reconciliation to be in WASM as opposed to JS that is optimized and JIT'ed by modern JS engines? I doubt it as the use case is very different from VR/AR/AI where WASM would presumably have some advantage.

Any experts to educate us?

Web browsers are pretty fast already, so if you only do those DOM updates that actually affect what you see on screen you can have your app update at 60 frames per second. That's where a virtual dom helps out.

Virtual dom systems effectively work in two stages:

1) figuring out how the DOM should be updated

2) applying these changes with as few (or cheapest) DOM operations as possible

I don't expect WebAssembly will do much for step (2), as the bottleneck there is in repeatedly crossing the boundary between the javascript world and the DOM, or in the DOM operations themselves.

Step (1) is essentially just crunching (tree based) data structures. Web Assembly should be a lot faster here, because (depending on implementation) you get denser data structures, better cache locality, no garbage collection, and so on. You'll also get much more consistent performance.

For complex web applications that keep a lot of view state around (1) might be the bottleneck, but in most real world applications I expect that (2) is the bottleneck, because the browser has to do so much work in terms of layout, CSS application, and so on every time the DOM gets updated.

If you really want to get a big performance improvement you have to do much more in WebAssembly. Use only absolute positioning for DOM nodes and create your own layout engine. Don't have any CSS except for the rules needed to display what is currently visible. Do all typesetting in WebAssembly too. This means recreating much of a web browser inside a web browser, and you can then optimize the WebAssembly code for the specific needs of your web application for big performance gains.

It may sound hugely impractical, but if WebAsembly is only 10% slower than C it's viable. It means you won't have to wait for standards organizations to give new FlexBox options, or a way to dynamically adjust font size to fit a fixed rectangle, you can just solve all these problems locally. If this works it could lead to a complete "user space" renaissance.

> Web Assembly should be a lot faster here, because (depending on implementation) you get denser data structures, better cache locality, no garbage collection, and so on.

You can get these advantages by using plain javascript with typed arrays.

https://github.com/vandenoever/baredom

I would guess a lot of the overhead would be thunking back and forth between webasm and js functions, so if you implemented the update in pure js where it can call directly into the DOM apis, and also read pointers, numbers and strings directly out of the webasm data array, then you could avoid any thunking between the two different worlds in the inner loop.

By thunking I mean doing this from C++ code:

    EM_ASM_({
        window['asmDomHelpers']['domApi']['appendChild']($0, $1);
    }, vnode->elm, createElm(vnode->children[i]));

So you propose to interface between C++ and JavaScript via a shared buffer and to eschew any explicit FFI calls.

If the data structure is lockless, that is doable.

"If you really want to..."

This is exactly what we've done with our product, Elevate Web Builder, so I can definitely attest to the fact that it is 100% correct. Our product uses a compile-to-JS transpiler and has its own layout engine, uses dynamic CSS, has update cycles to allow for efficient DOM updates, etc. The only real downside is that text measurment must touch the DOM and is really slow, so the layout engine has to perform a lot of intelligent caching and "measurement-avoidance" techniques to ensure that it measures text as infrequently as possible.

If you do your own line wrapping, then I'm pretty sure you don't need to do any text measurements. To get the kerning information for a given font face and size you can cache the widths of all character pairs ("AA", "AB", "AC"). Last I checked just summing the width of character pairs in a string would get you a width estimate accurate to the pixel, even for reasonably long strings. You don't have cross-platform pixel-perfect text rendering anyway, so you don't need to be 100% accurate. Maybe you're already doing this, but if not it's worth exploring.

This might be a dumb question, but after figuring out the width of "AB" and "BC", how do you know the width of "ABC"? Do you just calculate the distances A–B and B–C as ab_distance = width("AB") - (width("A") + width("B")) ... and so on?

Yep. Kerning is just the amount of space in between two characters. So to calculate the total width of a string you take the (fixed) widths of the individual characters and you add the variable widths of the space between each character pair.

Thanks, that is very interesting. We do happen to rely on the DOM for line-wrapping, but that's just because we didn't think you could get reasonable results doing what you've suggested.

Okay, off to see what this produces... :-)

Google Docs does its own line-wrapping for proportional fonts, so that may be interesting to look at.

It's a little finicky to get it all to work consistently cross browser and cross platform, so good luck!

What do you do if you encounter a pair like "ペア"?

The speed advantage - if there is one - would come from the code surrounding the DOM not the DOM code itself. Without this package you would write the surrounding code in JS because that's what you need to do to even talk to the DOM. But with this package that code can be written in C++ and so it will be fast.

If you have enough of that surrounding non-DOM code that significantly benefits from not being JS, then you will have a speed up. You could get this speed up even if talking to the DOM using this package is slower than talking to the DOM directly in JS. It just depends on how much do you depend on the speed of everything else and how much of everything else is written in C++.

>You can only be as fast as the slowest link

Only if that "slowest links" takes a large part of your processing time.

If you have a program that reads some data and passes them to a much faster foreign function (e.g. Python passing to a C extension) to do some calculation, then your "slowest link" (in this case, Python) wont matter much.

The program will still be many times faster than if the calculation had been written in pure Python.