3 ms·
Preact is a thinner alternative to React. https://preactjs.com/ https://preactjs.com/ From a quick look, it seems like this demo is using a web worker (i.e. an
by Torn 10y ago
Preact is a thinner alternative to React. https://preactjs.com/ https://preactjs.com/
From a quick look, it seems like this demo is using a web worker (i.e. another thread) to chunk up the dom manipulations. There's also some code to prioritise dom elements that are in the viewport.
(As an aside, this submission would be better if it linked to a blog post explaining what's interesting about this, rather than just the demo itself)
- developit 10y agoAgreed. Someone submitted this before I got around to writing that post, heh. Synopsis: fake DOM in the worker w/ MutationObserver that sends batched changes up to the UI thread. Event delegation to get things back into the worker. It's actually relatively straightforward, demo code is a mess though.
- jsprogrammer 10y agoIs it worth doing right?
- axemclion 10y agoThere are a bunch of other complexities too - things like (1) cancelling events which are synchronous, but web worker communication is async (2) What is the best serialization format ? I found JSON.stringify to be the fastest, but how to compress data better ? (3) How to batch the operations when you want to send info over from worker to the UI thread. The batch size should be small enough that it runs in 16ms, but large enough that you don't waste frame cycles. (4) Figuring out if it makes sense to spawn multiple workers to diff parts of the VDOM tree - similar to React Fiber
- axemclion 10y agoI did something similar for React - and here is a blog post about what exactly is happening - http://blog.nparashuram.com/2016/02/using-webworkers-to-make-react-faster.html http://blog.nparashuram.com/2016/02/using-webworkers-to-make...