parallel-dom

Parallel DOM

Make your apps faster, parallelize away heavy DOM operations.

Usage

Javascript

Example | Demo

import PDom from 'parallel-dom';

const pdom = new PDom(
    // The root, the subtree will be 
    // made parallel.
    '#root', 

    // Javascript entry point of the script 
    // to run parallely inside the parallel subtree.
    () => import('path/to/script/which/runs/in/parallel') 
);
pdom.render();

React

Example | Demo

// parallel-component.tsx
const ParallelComponent = ({ prop1, onCallback }) => {
    // heavy operations.
    // ...
    return <button onClick={onCallback}>{prop1}</button>
}

import PDom from 'parallel-dom/react';

const ParallelComponent = PDom(() => import('./parallel-component'));

export const App = () => {
    const [p1, setP1] = useState('');
    return <>
        ...
        <ParallelComponent prop1={p1} onCallback={cb} />
    </>
}

React limitations

• Not supported: unserializable props (JSX in props etc.)
• Callbacks in Props are supported, but they are all async.

Under the hood

• Creates an iframe on a https://<hash>.pdom.dev domain.
• Passes the scriptUrl and creates a clone of the passed DOM element to the above frame.
• The iframe loads and runs the script.
• Since, iframe is cross origin, the browser creates a dedicated process for it.
• We use origin-agent-cluster header to enable multiple PDom to have their own dedicated subframe process.

For more details:

• Performance isolation with the Origin-Agent-Cluster header