DEV Community

Adam Crockett 🌀
Adam Crockett 🌀

Posted on

High performance with Webworkers

What I'm doing

I'm working on an algorithm reactive diffusion which requires per pixel manipulation on canvas. Following the coding train instructional video:

A few changes

Instead of following to the letter I am making a few changes such as either to reduce jank or to speed up time to render, after all this canvas will be surrounded by UI eventually.

My (un?)realistic requirements

As you can see this is an excersize in performance as well as a pretty animation.

I know that I would love the ability to render full size of the screen of up to 27 inches without much of a wait, sub 1 second would be outstanding. Even a little flash would be fine.

The rules

  • No fancy ES6 array methods (perf reasons)
  • use ye olde for loop
  • keep optimizing
  • Use workers to take strain off main thread
  • post processing may be an option (CSS)

Getting started

So I know I need a multidimensional array representing X and Y axis, each item in the Y axis will likely be an Object literal with contains information on how to transform the px that it represents, 450,255=redyou get the idea.

So I figured, might as well use a Map of Maps instead of arrays, that's probably going to result in understandable code. They are apparently faster than arrays too, so each map is a 0 indexed wrapper containing objects.

This is actually pretty slow to create (WxH)n Maps so I thought, let's get this into a worker and figure out what to do from here... > 10 seconds to run using Parallel.js 😱, it seems much faster in the main thread < 2s so I'm a bit stuck, what am I doing wrong, is newing up a map that expensive?!

From here

Your comments will be really helpful!

I'm also going to look into using wasm for this bit as have had some fun before with emscripten.

Also, am I mad doing this in 2D context should I just go webgl, learn it and stop moaning?

Should I tile the canvas somehow or even use CSS box reflect and render just half the size?

Tell me what you think, and share your tips on intensive jobs in JavaScript. 🥳

Top comments (6)

mateiadrielrafael profile image
Matei Adriel

Webgl is your best bet: you can run your program once for every pixel at the same time

adam_cyclones profile image
Adam Crockett 🌀

Like a shotgun is to a stapler? Both make holes.

I thought somebody might say that. Glsl rewrite it is 🔥🚒.

Still keeping these optimizations, because I want to be off the main thread.

mateiadrielrafael profile image
Matei Adriel • Edited

Not 100% related to your issue but take a look at this repo.
There was also a [this](

Edit: the first link was wrong so i changed it, maybe open it again.

Thread Thread
adam_cyclones profile image
Adam Crockett 🌀 • Edited

I notice with the GPU computation library on my mobile that when running benchmarks, it's very slow and janky when scrolling. Perhaps not good on lower end GPUs. Its a cool project though and maybe the future?

andrasnyarai profile image
Andras Nyarai

there is also this

but yea glsl is ur best bet, have fun ;)

adam_cyclones profile image
Adam Crockett 🌀

Yep mentioned that in the post, it works well and makes things a bit easier to manage too.