Web workers for Lightbeam

This is an initial attempt to improve the graph’s performance for large number of nodes using web workers. This PR is a work in progress.

The idea here is to off-load the heavy force layout computations to the web worker. This improves performance during page load.

I am also experimenting on passing the logic to web workers during the drag events. This part is still work in progress.

Here is the rough idea that I try to achieve:


In the present situation, when we drag, the force layout restarts the simulation. When there are large no. of nodes, the graph takes a lot of time to achieve equilibrium, thereby dropping the frame rates. Restarting the simulation is necessary, to compute the updated coordinates and give the soft transition, else the drag effect doesn’t appear smooth.

Using web workers, I try to keep the dragged coordinates in the main thread, invoke the web worker during dragEnd. The web worker computes the updated coordinates and waits until the graph attains equilibrium. I need to figure a way to get the updated coordinates and achieve smooth animations.

Web workers

Web Workers is a simple means for web content to run scripts in background threads.

A Web Worker is just a general purpose background thread. The intention here is to run background code such that long running tasks do not block the main event loop and cause a slow UI.

Motivation to use web workers for Lightbeam

Considering the single threaded nature of JavaScript, using web workers we can take off the burden from main thread when we have to deal with heavy computational work, which is true for Lightbeam. When the number of nodes increase, the force layout takes a lot of time to stabilise. The UI (main) thread is busy calculating the force layout values and in turn slows down the UI drastically. It becomes difficult to interact with the graph at this point.

When we started this project, performance was the key factor and we were happy to see the improvements canvas did over svg. Now we are expecting to see huge performance benefits via web workers.

Stay tuned for more updates!



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: