Question 256644 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to use Web Workers to improve the performance of a CPU-intensive task in JavaScript?

I have a JavaScript function that performs a CPU-intensive task, such as image processing or data analysis. The function takes a long time to execute and blocks the main thread, which causes the user interface to freeze and become unresponsive. I want to improve the performance and user experience of my web application by using Web Workers, which are a way to run JavaScript code in a separate thread without affecting the main thread. However, I am not sure how to use Web Workers correctly and efficiently. Here is my code:

// define a function that performs a CPU-intensive task
const heavyTask = (input) => {
// some complex logic that takes a long time to execute
// ...
// return the output of the task
return output;
};

// get the input data from somewhere
const inputData = ...;

// call the function with the input data and handle the output
heavyTask(inputData).then((outputData) => {
// do something with the output data
// ...
});

How can I use Web Workers to run the heavyTask function in a separate thread and communicate with the main thread? What are the benefits and drawbacks of using Web Workers? Are there any best practices or tips for using Web Workers in JavaScript?

Any help or suggestions would be appreciated. Thanks in advance.

Tags:

2

Answers


  1. 0

    You can convert your function to a string and pass the arguments as JSON and create a worker with this source code.
    It’s also possible to listen messages from the function for example to display the computation’s progress and show it for example in a progress bar.

    So the function executeFunctionInWorker takes 3 arguments:

    1. A function to be executed in a worker
    2. Arguments to pass to the function as an array
    3. A callback for receiving message back from the function
    const progress = document.getElementsByTagName("progress")[0];

const executeFunctionInWorker = function(fn, args, messageCb){

  return new Promise(resolve => {
    const blob = new Blob([`
    const result = (${fn.toString()})(...${JSON.stringify(args)});
    postMessage({result});
    `], {type: 'application/javascript'});
    const worker = new Worker(URL.createObjectURL(blob));
    worker.addEventListener('message', e => {
      if('result' in e.data){
        resolve(e.data.result);
      }else{
        messageCb(e.data);
      }
    });
  });
  
};

const doComputation = (numberOfCycles) => {
  let count = 0;
  let start = performance.now();
  while(count++<numberOfCycles){
    structuredClone(Array.from({length: 30000}, () => Math.random()));      
    postMessage({progress: Math.round(count/numberOfCycles * 100)});
  }
  return performance.now() - start; 
};

const run = async() => {
  $run.disabled = true;
  const duration = await executeFunctionInWorker(doComputation, [$count.valueAsNumber], ({progress:value}) => progress.value = value);
  $run.disabled = false;
  console.log('Calculations took', duration, 'ms');
};
    * {
  font-family:monospace;
  font-size:1rem;
}
    <label>Number of cycles:<input style="width:100px" id="$count" type="number" value="1000"></label>
<button id="$run" onclick="run()">Run</button>
<progress value="0" max="100"></progress>
    Login or Signup to reply.
  2. 0

    Why not use separate js file to contain the code for the heavyTask function. then load it in a new thread using the Worker() constructor.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search