Parallel Processing in JavaScript with Concurrency

JavaScript is a single-threaded language, which means it executes code in a sequential manner, one operation at a time. However, many applications require the execution of multiple tasks concurrently to improve performance and responsiveness. Parallel processing is a technique used to achieve concurrency in JavaScript. In this article, we will explore parallel processing in JavaScript with concurrency and how to implement it using the provided code as an example.

Understanding Concurrency

Concurrency is the ability of a system to handle multiple tasks and execute them in overlapping time intervals. It allows you to perform multiple operations simultaneously, which is especially useful when dealing with tasks that involve waiting, such as network requests, file I/O, or time-consuming calculations.

The Provided Code

The code provided in the example is a JavaScript function called parallel. This function allows you to execute an array of tasks concurrently by leveraging JavaScript's asynchronous capabilities. Let's break down how this function works:

async function parallel(arr, fn, threads = 2) {
  const result = [];
  while (arr.length) {
    const res = await Promise.all(arr.splice(0, threads).map(x => fn(x)));
    result.push(res);
  }
  return result.flat();
}

• arr: The array of values that you want to process concurrently.
• fn: A function that performs a task asynchronously and returns a promise.
• threads: The maximum number of concurrent threads to use.

The parallel function processes the array of tasks in chunks, with a maximum of threads tasks running concurrently. It used Promise.all to wait for all tasks in a chunk to complete before moving on to the next set of tasks.

Using the parallel Function

In the provided code, an example of using the parallel function is demonstrated. An array arr is defined, and each element of this array is a number from 1 to 20. We want to square each of these numbers asynchronously.

const arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
const apiLikeFunction = v =>
    new Promise((resolve, rej) =>
      setTimeout(() => {
        console.log('executing : ', v);
        resolve(v * v);
      }, 3000),
    )
const threads = 5
const res = await parallel(arr,apiLikeFunction, 5);

In this example:

• arr contains the array of numbers we want to square.

• The processing function fn is defined as an asynchronous operation that simulates a delay using setTimeout and then resolves with the square of the input value.

• The threads parameter is set to 5, allowing up to 5 tasks to run concurrently.

Executing and Measuring Performance

The example code uses console.time and console.timeEnd to measure the performance of parallel processing. It logs when each task is executed and records the total time taken for the entire operation.

We have an array of 20 elements and a concurrency of 5 at a time. And each promise resolves in 3 seconds. So, the total time taken will be:
(20/5)* 3 = 12 ± (I/O time)

Get in Touch for Your Parallel Processing Needs

If you’re looking to implement parallel processing in your JavaScript projects or need assistance with any other development tasks, feel free to get in touch. Our team of experts is ready to help you take advantage of the power of concurrency and improve the performance of your applications. Don’t hesitate to contact us for all your JavaScript and development needs.

Conclusion

Parallel processing in JavaScript with concurrency is a valuable technique for improving the efficiency of your applications. The provided code example demonstrates how to process tasks concurrently, which can be especially beneficial when dealing with time-consuming operations. By understanding and using this technique, you can enhance the performance and responsiveness of your JavaScript applications.