JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<input type="text">

JavaScript

const MAX_PROCESS = 30;
const input = new Array(1000000000);
const MAX = 10000;
const NO_OPERATIONS = Math.ceil(input.length / MAX);


function createWorker(fn) {
  var blob = new Blob(['self.onmessage = ', fn.toString()], {
    type: 'text/javascript'
  });
  var url = URL.createObjectURL(blob);

  return new Worker(url);
}

window.finalResult = [];
window.wtime = 0;
let cnt = 0;
let startTime;
const workers = Array(MAX_PROCESS)
  .fill(1)
  .map(() => {
    const w = createWorker(processArray);
    w.onmessage = (e) => {
      window.wtime = Date.now() - startTime;
      e.data.forEach(d => window.finalResult.push(d));

      cnt++;

      if (cnt === NO_OPERATIONS) {
        console.log('done!', finalResult.length);
      } else {
        console.log(cnt);
      }
    };
    return w;
  });

if (input.length > MAX) {
  startTime = Date.now();
  Array(NO_OPERATIONS).fill(1).forEach((cnt, i) => {
    workers[i % MAX_PROCESS].postMessage(
      input.slice(cnt * MAX, (cnt + 1) * MAX)
    );
  });
}

function processArray(e) {
  self.postMessage((e.data || []).fill(1));
}