Looping through a huge array in JavaScript

Question

I'm getting response from this provider where there is a huge, deep array.

I only have to loop through this array and do some simple calculation but it's taking quite long to process.

What's the best practice to do this with JavaScript?

Answer 1

The best way to do heavy computation is to start a WebWorker. Remember that transferring large objects to a worker is slow, so you would probably like to get the response (like start an ajax) in the worker itself.

If you are stuck to one thread, you can use the following method to split the computation into smaller parts, but this will not help you if a single iteration takes too long.

function eachAsync(array, fn) {
  return new Promise(function(resolve, reject) {
    var index = 0;
    function chunk() {
      try {
        var end = performance.now() + 20;
        for(;;) {
          if (index < array.length) {
            var current = index++;
            fn(array[current], current);
          } else {
            resolve();
            break;
          }
          if (performance.now() >= end) {
            schedule();
            break;
          }
        }
      } catch(e) {
        reject(e);
      }
    }
    function schedule() {
      setTimeout(chunk, 10);
    }
    schedule();
  });
}

Answer 2

If you are using HTML5 with a modern browser you can use WebWorkers: http://ejohn.org/blog/web-workers/

Or you can use a homegrown method: Execute Background Task In Javascript