Show HN: Parallel DOM – Upgrade your DOM to be multithreaded

[sakras]

The demo fell a little flat because the "before parallel DOM" and "after parallel DOM" boxes were almost exactly in sync for me (Firefox, MacOS).

[ModernCannabist]

It does say right on the homepage:

> What browsers are currently supported ? Since we depend on the `Origin-Agent-Cluster` header being honored by the browser, we are currently limited to Chrome and Edge.

[jmspring]

The non parallel was faster for me... But also on FF/MacOS

[kxrm]

Yea I did a comparison between Chrome and Firefox as I did not see any difference on Firefox between the panes.

It does seem to work in Chrome though.

[theogravity]

On an M2 mac using Chrome. The before dropped down to 60 FPS / 10 MB, while the after was 120 FPS / 5 MB.

[sottol]

you have to wait a while until the before box starts to stutter, maybe 30-60 secs.

[eyelidlessness]

It seems the “threading” mechanism depends on the browser’s own process model? As in, you’ll get another “thread” iff the browser creates a separate process for the cross-origin iframe?

That’s a clever hack where it works. For what it’s worth, it doesn’t seem to work on mobile Safari, at least judging by both examples slowing down at roughly the same rate. In which case, the “parallel” example is very slightly slower, presumably due to marginal overhead of the cross-frame mechanism.

[ashubham]

Yes correct. Safari/FF have shown positive intent to implement this FWIW.

[XCSme]

I don't understand what it does and why.

What kind of DOM computations are so intensive they need to be parallel?

Most intensive computations are done in JS, which is not related to the DOM and can be ran in Web Workers if you need parallel execution.

[rozap]

I'm wondering the same thing. It seems like it'll primarily be used as a bandaid for poorly written applications to run slightly less slowly. Lovely, now some garbage page can hog more of my CPU, this is exactly what I wanted.

[ashubham]

Heavy data visualizations, interactive infographics etc. Also, if your app has the capability to run third party plugins you generally want to run it in a separate context for security reasons. With PDom, you also isolate yourself from the perf implication the 3rd pary code may have.

[candiddevmike]

Furthermore, how can a racey multi threaded DOM end well? AFAIK, most GUI rendering in apps is single threaded.

[raggi]

classic web engineering demo:

  - small well contained math operation that could be put in a worker
  - instead of putting that in a worker, startup a whole parallel page and shuttle messages via ipc for the heaviest part of the process, redoing a lot of the work twice

why are the solutions always backward?

[ashubham]

Even the visualization is drawn in the parallel worker. Which CANNOT be put in a worker. If you wait long enough on the demo page, you will see how much time just redrawing the DOM is consuming.

[theogravity]

Requesting performance isolation with the Origin-Agent-Cluster header:

https://web.dev/articles/origin-agent-cluster

[halyconWays]

We've strayed too far from God's light. Return to Gopher.

[btown]

Can't call it hypertext without using hyperthreading!

[chrisldgk]

For anyone interested, I made a public Docker Image of the "backend" (which is basically just and index.html and a JS file)[0].

This should make self-hosting a bit easier. You can also find the GitHub repository for the (pretty simple) Dockerfile on GitHub[1].

[0] https://hub.docker.com/repository/docker/uninspiredstudioops...

[1] https://github.com/UninspiredStudio/parallel-dom-docker

Edit: Formatting

[pragmatic]

I think you’re burying the lede here.

It looks like you have the ability to run an isolated portion of the dom on another thread and you can communicate with it with this library? Am I close?

I think more examples could help. Could you have 2-3 real time analytics viz/charts running in 2-3 different threads? Is this mostly for desktop or does mobile benefit also?

[ashubham]

Thanks for the feedback.

You could run any number of parallel threads.

This is applicable on both desktop and mobile.

[apatheticonion]

It's crazy that people say that WASM won't replace JavaScript. This demonstrates a use case better suited for languages with better threading models than JavaScript.

Feels like the web world is desperately in need of competent threading capabilities. Can I (practically) use Rust or Go in the browser via wasm already!?

[mr_toad]

The language has nothing to do with it.

You can use “WASM threads” from Rust or Go. Or JavaScript for that matter. Under the hood it’s all workers and shared array buffer, nothing to do with the language. Last time I checked you can’t even use std::thread for instance in Rust, since the compiler doesn’t understand workers (because workers aren’t actually part of WASM).

None of which will help you when updating the DOM anyway, since that happens in its own thread. It’s up to the browser how they run their rendering engine and I doubt they’re ever likely to allow direct control over that.

[jauntywundrkind]

> Can I (practically) use Rust or Go in the browser via wasm already!?

You can (built into rust and tinygo for go.)! And wasm-threading has been around for a while! https://webassembly.org/features/ But I don't think these wasm-threading capabilities are well harnesses by any languages yet.

There been a decade of webworkers being super possible. That does get multi-threading! With transferable memory & everything. So, this isn't like some new super non-js thing. Some folks do use workers, but alas not popular enough, not something React or Angular helps steer folks to.

Whats super neat and tricky here is that the iframe in separate origin-agent-cluster has a full DOM implementation that's there & raring to go. We already could have tried using jsdom or happy-dom or a wasm-powered alternative in a worker to do something like this, already. This is super cool though because it's much lower code! It uses a dom runtime that's already loaded & available (the browser's) rather than having to ship & load a separate DOM runtime.

[explaininjs]

This use case is purposefully hamstringed for demo purposes. Rust or Go won’t change anything here, you still need to pass messages to/from the worker. Same exact mechanism as if you used a webworker, which are already widely available.

But to answer your question, yes you can use Rust and Go practically in the browser. It just isn’t all that helpful except in narrow circumstances.

[AgentME]

Even with multithreaded WASM, the DOM will still only be usable from the page's (or iframe's) main thread, so if you want to do DOM operations not on the page's main thread you'll still need to do the same steps OP's project does (create an iframe and do stuff there).

[leptons]

Call me crazy but, WASM won't replace JavaScript. There are so many cases where a simple script will do. Firing up a terminal, writing in another language, compiling and going through the trouble to turn something simple into WASM is actually the crazy thing to do. Also, I am in no way approving of the techniques described in the article.

[ks2048]

The demo is computing prime numbers - what does that have to do with the DOM?

[ashubham]

It also plots the prime numbers on a visualization which is DOM. You will see over time plotting more points becomes time consuming in the demo

[Nathanba]

pretty interesting, Origin-Agent-Cluster only exists on Chrome/Edge so far though and it sounds like it is only intended as a browser hint. From the example I don't quite understand though: Why would the non-parallel version already be so laggy if it runs on the mainthread (1 thread, nothing much else happening on the page) versus the iframe-parallel version which also just gets 1 thread right?

[comex]

I think the idea is that part of the page would be rendered outside the iframe and part inside it.

[ashubham]

That initial load lag seems is something non related to this project.

[eacapeisfutuile]

Please no, this is a solved problem for decades, it will not actually multithread the DOM and more likely just add overhead.

[ashubham]

Can you please put more details. "Origin-Agent-Cluster" frames are actually run in a separate sub process.

[btown]

See also: https://github.com/krakenjs/zoid which allows you to present a simple interface to sites that want to embed your application and send parameters/register callbacks. All the caveats of frames still apply, of course, and scrolling glitchiness alone is a reason to avoid frames altogether... but if you absolutely need to present your application as a frame, it's a developer-friendly way to do so.

Pdom seems to be a way to do that to yourself, if you can't trust that your content won't cause performance degradations and you absolutely want the context outside that content to stay responsive. I'd only use it, and really any frame, for components where the size is known ahead of time, though; asking a frame to resize itself to fit its contents, when its contents may themselves be resizing to the size of the frame, is a recipe for disaster. Which brings me around to why I try to avoid frames for anything user-facing when at all possible.

[fabiofzero]

Firefox on M1 Max. After Parallel DOM is slower here.

[ashubham]

The new browser features used for this project are only supported on Chrome/Edge right now. But FF/Safari have shown positive intent.

[gshklovski]

Worker threads are so frustrating. Good work

[xori]

Why reach for iFrames over other technology like WebWorkers?

[ashubham]

WebWorkers do not have access to DOM.

[SahAssar]

That's part of the FAQ?