Web Workers and the DOM Boundary

1// analyse.worker.ts — a realm with no document in it.
2// `self` is the DedicatedWorkerGlobalScope, not `window`.
3type In = { id: number; rows: Float64Array }
4type Out =
5  | { id: number; type: 'progress'; done: number; total: number }
6  | { id: number; type: 'done'; mean: number; p95: number }
7 
8self.onmessage = (e: MessageEvent<In>) => {
9  const { id, rows } = e.data
10  let sum = 0
11  for (let i = 0; i < rows.length; i++) {
12    sum += rows[i]
13    // progress is a message, never a DOM write
14    if (i % 20_000 === 0) {
15      const msg: Out = { id, type: 'progress', done: i, total: rows.length }
16      self.postMessage(msg)
17    }
18  }
19  const sorted = rows.slice().sort()
20  const msg: Out = {
21    id, type: 'done',
22    mean: sum / rows.length,
23    p95: sorted[Math.floor(sorted.length * 0.95)],
24  }
25  self.postMessage(msg)
26}
27 
28// page.ts — the only realm allowed to touch the document
29const worker = new Worker(new URL('./analyse.worker.ts', import.meta.url), { type: 'module' })
30const status = document.getElementById('analysis-status')! // exists up front
31let current = 0
32 
33worker.onmessage = (e: MessageEvent<Out>) => {
34  if (e.data.id !== current) return          // an answer to an old question
35  if (e.data.type === 'progress') {
36    status.textContent = `Analysed ${e.data.done.toLocaleString()} of ${e.data.total.toLocaleString()} rows`
37    return
38  }
39  status.textContent = `Done. Mean ${e.data.mean.toFixed(2)}, p95 ${e.data.p95.toFixed(2)}.`
40}
41worker.onerror = (e) => { status.textContent = 'Analysis failed.'; report(e) }
42 
43function analyse(rows: Float64Array) {
44  current += 1
45  worker.postMessage({ id: current, rows })
46}

The id check is not defensive padding — without it, a second click renders the first click's answer whenever the first finishes last. And status is queried once, up front, because a live region must be in the DOM before its text changes to be announced.