Why should you care?

MarkupVerse analytics dashboards crunch CSV rows off the main thread.

See it live — copy this example

Save as demo.html and open in your browser, or use Run Example below.

<main>
  <label>Rows to parse <input type="number" id="rows" value="50000"></label>
  <button type="button" id="run">Parse in worker</button>
  <p id="result"></p>
</main>
<script>
document.getElementById('run').onclick = () => {
  const blob = new Blob(['self.onmessage = e => { let sum = 0; for (let i = 0; i < e.data; i++) sum += i; self.postMessage(sum); }'], { type: 'application/javascript' });
  const w = new Worker(URL.createObjectURL(blob));
  w.onmessage = ev => { document.getElementById('result').textContent = 'Sum: ' + ev.data; w.terminate(); };
  w.postMessage(Number(document.getElementById('rows').value));
};
</script>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• Workers cannot touch the DOM.
• Communicate with postMessage.
• Terminate when done to free memory.

Practice next

1. Create a worker from a Blob URL.
2. postMessage a number.
3. Display the result on main thread.
4. Move worker code to worker.js file.
5. Post progress updates every 10k rows.

Remember

No DOM in workers. postMessage only. Terminate workers.

MarkupVerse CSV crunch

Dashboard parses 50k ledger rows.

Outcome: UI stays responsive while totals compute.