React Renderer using Web Workers
A React Custom renderer using Web Workers. All the Virtual DOM reconcilliations happen in a WebWorker thread. Only node updates are sent over to the UI thread, result in a much more responsive UI.
An existing React application can leverage WebWorkers using this library with minimal change. Look at the usage section for details.
The demo is hosted at http://web-perf.github.io/react-worker-dom/. To run a local version of the demo,
- Clone the repo run
npm installto install all dependencies.
- Build the app using
npm run demo
http://localhost:8080/test/dbmonster/to view the demo app, or
http://localhost:8080/test/todofor the todo app.
- Tweak the params in the URL to change to use web workers, increase number of components, etc.
A typical React application
A typical React application would looks something like the following.
// File: main.jsx import React from 'react'; import reactDOM from 'react-dom'; reactDOM.render(<Component/>, document.getElementById('container'));
Using it with Web Workers
To use this renderer, we would need to split the above file into 2 parts, one that is on the page, and another that starts as a web worker.
// File: main.js - included using a script tag in index.html import React from 'react'; import reactDOM from 'react-worker-dom'; // Instead of using react-dom reactDOM.render(new Worker('worker.js'), document.getElementById('container'));
worker.js file is the one that now holds the actual Component.
// File: worker.jsx - loaded in index.html using new Worker('worker.jsx') in the file script above; import React from 'react'; import ReactWorkerDOM from 'react-worker-dom-worker'; ReactWorkerDOM.render(<Component/>);
test\todoapp directory for the examples.
To automatically collect frame rates and compare it with the normal version
npm run demoto start the server and host the web pages
npm run perf chrome workerto test frame rates for various rows in chrome in a Web Worker. Instead of
chrome, you could use
android, and instead of
worker, you could use
normalto test the other combinations.
- The frame rates are available in
_dbmonster.jsonfile, for each row count.
Here are the things that need to be done next.
- Add support for form elements like
- Support event utilities that enable things like autofocus, etc.
- Enable preventDefault() semantics in events.