Project: responsive import worker

Last updated: 4 Oct 20268 min read

project

Build a local measurement-file preview for case 47 and case 62. The page must show that processing has begun before the full parse finishes and must keep a separate control responsive. Use an event-loop trace to explain why a promise callback by itself does not move CPU work away from the main thread. Compare bounded task yields with a dedicated worker. If the worker path transfers an ArrayBuffer, document that the sender loses that buffer. Give every job a generation ID, reject stale results after switching cases, and decide whether to terminate or reuse the worker when the route closes. A photo preview may create an object URL and observer; both need one owner and cleanup path.

Build contract

Measure first visible progress, total completion, and response to a second control for synchronous, chunked, and worker paths.
Send job IDs with worker messages; reject obsolete results and handle malformed files with a bounded error state.
Transfer bytes only when ownership can move, or pay for a deliberate copy; release worker, observer, listener, and object URL resources on route exit.
Run repeated open, replace, and close cycles to inspect callback count and retained memory.

Implementation checkpoint

function ownsWorkerResult(result, activeCaseId, activeJobId) {
  return result.caseId === activeCaseId && result.jobId === activeJobId;
}
console.log(ownsWorkerResult({ caseId: 47, jobId: 62 }, 62, 62));
// Output: false

Cost and boundaries

A worker adds startup, module-loading, messaging, and memory overhead, while a transferred buffer avoids one large copy by detaching it from the sender. Chunked main-thread work avoids worker setup but lengthens total completion through task yields. Compare the measured tradeoff with realistic file sizes rather than choosing by fashion. Cleanup code adds branches, but unreleased observers, URLs, and workers can accumulate through a long review session. The project should record both interaction delay and total processing time.

Failure drill

Resolve the case 62 job before the case 47 job, then let 47 finish after route change. The panel must stay on 62. Try reading the transferred buffer from the sender; this should expose the ownership mistake during development rather than in a later feature. Parse a malformed file and verify no success message appears. Open and close a preview thirty times and count resize callbacks; one active panel should not have thirty active observers. Leave the route mid-import and confirm pending work cannot alter another page.

Acceptance checks

A processing status paints before a long import completes and a second control remains usable.
Case switches reject stale worker success and error messages.
Transfer versus copy behavior is documented and tested with the actual byte buffer.
Thirty preview cycles do not multiply callbacks or retain old object URLs.

Common Mistakes

Assuming Promise.then runs CPU work on a separate thread.
Posting a cancel message to an uninterrupted synchronous worker loop and expecting instant cancellation.
Reusing bytes after transfer.
Treating DOM removal as cleanup for observers and object URLs.

web-tech

web-development