HTML Code
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Heavy loop off main thread</title><style>body{font-family:system-ui,sans-serif;margin:0;padding:1.5rem;background:#f8fafc;color:#334155;line-height:1.6}
h1{margin:0 0 .5rem;font-size:1.25rem;color:#0f172a}p{margin:0 0 1rem;max-width:420px}
button{padding:.55rem 1rem;font-size:.9375rem;background:#2563eb;color:#fff;border:none;border-radius:8px;cursor:pointer;margin-right:.5rem;margin-bottom:.5rem}
button:hover{background:#1d4ed8}button.secondary{background:#64748b}
#status,#result{margin-top:1rem;padding:.75rem 1rem;max-width:420px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;font-size:.875rem}
#status.ok{border-left:4px solid #22c55e}#status.err{border-left:4px solid #ef4444}
#tick{font-variant-numeric:tabular-nums;color:#0f172a;font-weight:700}</style></head>
<body>
  <h1>Offload a heavy loop</h1>
  <p>The UI counter keeps ticking while the worker sums 0..999999.</p>
  <p>UI tick: <span id="tick">0</span></p>
  <button type="button" id="runBtn">Start sum in worker</button>
  <button type="button" id="mainBtn" class="secondary">Run same loop on main thread</button>
  <p id="status">Ready.</p>
  <script>
    var statusEl = document.getElementById('status');
    var tick = 0;
    setInterval(function () {
      tick += 1;
      document.getElementById('tick').textContent = String(tick);
    }, 100);
    function sumOnMain(n) {
      var total = 0, i;
      for (i = 0; i < n; i++) total += i;
      return total;
    }
    document.getElementById('mainBtn').onclick = function () {
      statusEl.textContent = 'Running on main thread (UI may freeze briefly)...';
      statusEl.className = '';
      setTimeout(function () {
        var total = sumOnMain(1000000);
        statusEl.textContent = 'Main thread sum = ' + total;
        statusEl.className = 'ok';
      }, 20);
    };
    if (typeof Worker === 'undefined') {
      statusEl.textContent = 'Web Workers are not supported in this browser.';
      statusEl.className = 'err';
    } else {
      var code = 'self.onmessage=function(e){var t=0,i;for(i=0;i<e.data;i++)t+=i;postMessage(t);};';
      var worker = new Worker(URL.createObjectURL(new Blob([code],{type:'application/javascript'})));
      worker.onmessage = function (e) {
        statusEl.textContent = 'Worker sum = ' + e.data + ' (UI kept ticking)';
        statusEl.className = 'ok';
      };
      document.getElementById('runBtn').onclick = function () {
        statusEl.textContent = 'Worker calculating...';
        statusEl.className = '';
        worker.postMessage(1000000);
      };
    }
  </script>
</body></html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
Web Workers — Heavy Loop Off Main Thread
