{"post":{"slug":"what-is-a-web-worker-2026","title":"What Is a Web Worker in 2026? JS Multithreading Guide","excerpt":"A web worker runs JavaScript on a separate thread so heavy computation does not freeze the page. Here is what it can and cannot do, and how it differs from a service worker in 2026.","category":"code","date":"July 21, 2026","author":"ByteLedger Team","content":"<span class=\"dropcap\">A</span> web worker is a JavaScript file that runs on its own thread, completely separate from the thread running your page. That separation is the entire point: a heavy computation — parsing a huge JSON file, resizing images, running a search index, hashing data — can run inside a worker without freezing scrolling, typing, or animation on the page. The tradeoff is that a worker lives in an isolated world. It cannot see the DOM, it cannot share variables with your page directly, and every piece of data crossing the boundary has to be explicitly sent as a message.\n\n## What changed in 2026\n\n- **Module workers are now the default way to write one.** Creating a worker with `type: \"module\"` lets the file use `import` statements directly, instead of the older `importScripts` function.\n- **Cross-origin isolation is more commonly configured**, unlocking `SharedArrayBuffer` and high-resolution timers for workers that need true shared-memory parallelism, such as WebAssembly threads.\n- **Client-side inference workloads pushed worker usage up.** Running a small ML model or embedding computation in the browser is increasingly done inside a worker so the UI stays responsive.\n- **RPC-style wrapper libraries are now the common pattern.** Rather than writing raw postMessage handlers, most teams wrap workers with a small library that makes calling one look like a normal async function call.\n\n## How a web worker works\n\nThe page creates the worker and sends it data. The worker computes and sends a result back. Neither side ever touches the other's variables directly.\n\n```javascript\n// main.js\nconst worker = new Worker(\"sort-worker.js\");\n\nworker.postMessage({ data: largeArray });\n\nworker.onmessage = (event) => {\n  console.log(\"Sorted:\", event.data);\n};\n```\n\n```javascript\n// sort-worker.js\nself.onmessage = (event) => {\n  const sorted = event.data.data.sort((a, b) => a - b);\n  self.postMessage(sorted);\n};\n```\n\nWrapping this exchange in a promise, the same return-and-settle pattern used in a [promise chain](/blog/what-is-a-promise-chain-2026), turns postMessage into something that reads like a normal async function call instead of a pair of event handlers.\n\n## What a worker can and cannot do\n\nA worker can run plain JavaScript computation, use `fetch`, timers, and most Web APIs that do not depend on the page. It cannot access `window`, `document`, or any UI element, and cannot share memory with the main thread unless you opt into `SharedArrayBuffer`.\n\n## Worker types compared\n\n| Type | Runs when | Purpose | Lifetime |\n| --- | --- | --- | --- |\n| Web worker (dedicated) | While the page that created it is open | Offload computation from the main thread | Tied to that one page |\n| Shared worker | While any connected tab is open | Share one worker across multiple tabs or windows | Tied to all connected tabs |\n| Service worker | Even when no tab is open | Intercept network requests, cache assets, enable offline and push | Independent of any single page |\n\nA [progressive web app](/blog/what-is-a-progressive-web-app-2026) typically relies on a service worker for offline support, not a dedicated web worker — the two are easy to confuse by name but solve different problems.\n\n## When to actually use one\n\nReach for a worker when the task is measurably heavy: parsing a large dataset, image or video processing, client-side encryption or hashing, search indexing, or syntax highlighting across a large file. For anything that finishes in a few milliseconds, the overhead of creating the worker and messaging back and forth costs more than it saves.\n\n## Common mistakes\n\n**Passing large binary data by copy instead of transferring it.** A plain `postMessage` clones the data by default. For large `ArrayBuffer` objects, pass it as a transferable object so the memory is handed off instead of duplicated.\n\n**Expecting DOM access inside the worker.** Any attempt to reach `document` or `window` from inside a worker throws immediately; it has to compute a result and message it back for the page to apply.\n\n**Creating a new worker per task instead of reusing one.** Spinning up a worker has real startup cost. For repeated tasks, keep one long-lived worker running and send it messages as work arrives.\n\n**Never terminating workers that are no longer needed.** Call `worker.terminate()` when the work is done, or the thread and its memory stay alive longer than necessary.\n\n## FAQ\n\n**Can a web worker access the DOM?**\nNo. Workers run in a separate global scope with no access to window, document, or any DOM API. They can only compute and send results back through messages.\n\n**Does every browser support web workers?**\nYes, dedicated web workers have been supported in every major browser for years. Support for newer additions like module workers and SharedArrayBuffer varies more, so check compatibility before depending on them.\n\n**How is a web worker different from a service worker?**\nA web worker offloads computation for the page that created it. A service worker sits between the page and the network, intercepting requests, caching responses, and enabling offline support and push notifications, even when no tab is open.\n\n**Is passing data to a worker slow?**\nIt depends on size and method. Small objects clone quickly. Large binary data should use a transferable object so the memory is handed off rather than copied, which stays fast regardless of size.\n\n## Where to go next\n\n- [What is a promise chain in 2026](/blog/what-is-a-promise-chain-2026)\n- [What is a progressive web app in 2026](/blog/what-is-a-progressive-web-app-2026)\n- [Debounce vs throttle in 2026](/blog/what-is-debouncing-vs-throttling-2026)","hue":150,"metaTitle":"Web Worker Explained 2026: Multithreading in JS","metaDescription":"A 2026 guide to web workers: how they run JavaScript off the main thread, when to use one, postMessage basics, and how they differ from service workers.","keywords":["web worker 2026","javascript web workers explained","web worker vs main thread","postmessage web worker","web worker vs service worker","offload work to a thread javascript","web worker example","transferable objects javascript","dedicated worker javascript"],"tldr":["**A web worker runs a script on its own thread** — heavy computation no longer blocks scrolling, typing, or animation on the main thread.","**Workers talk to the page through postMessage, not shared variables** — data passed between them is copied or transferred, never shared directly.","**A worker cannot touch the DOM** — it has no access to window, document, or any UI element; it can only compute and message results back.","**Web workers and service workers solve different problems** — a web worker is about parallel computation, a service worker is about network interception and offline caching.","**Skip:** spinning up a worker for small, fast tasks — the cost of creating one and passing messages back and forth outweighs the benefit unless the work is genuinely heavy."],"readTime":"4 min read","wordCount":897},"related":[{"slug":"what-is-an-object-in-programming-2026","title":"What is an object in programming in 2026? Data and behavior together","excerpt":"An object bundles related data and the actions that work on it into one unit. This guide explains what objects are, how they differ from classes, and why they shape so much modern code.","category":"code","date":"June 18, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":265},{"slug":"what-is-currying-2026","title":"What Is Currying? 2026 Guide","excerpt":"Currying turns a function that takes several arguments into a chain of functions that each take exactly one. Here is what that buys you and when it just adds ceremony.","category":"code","date":"July 22, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":240},{"slug":"what-is-a-closure-in-javascript-2026","title":"What is a closure in JavaScript in 2026? Plain-English guide","excerpt":"A closure is a function that remembers the variables from where it was created, even after that outer code has finished running. Here is what that enables.","category":"code","date":"July 17, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":240}],"sameCategory":[{"slug":"bazel-build-explained-2026","title":"Bazel Explained: What Hermetic Builds Actually Cost","excerpt":"Bazel delivers reproducible, precisely cached builds and demands that you describe everything. Here is what you get, what it costs, and who should say no.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":145},{"slug":"graphql-federation-2026","title":"GraphQL Federation: One Graph, Many Teams","excerpt":"Federation composes independently-owned subgraphs into a single API. Here is what it solves, the operational cost it adds, and when a simpler gateway is enough.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":300},{"slug":"hermetic-builds-explained-2026","title":"Hermetic Builds Explained: Same Inputs, Same Output","excerpt":"A hermetic build depends only on declared inputs. Here is what that property gives you, the common leaks that break it, and how to move toward it incrementally.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":130},{"slug":"monorepo-tooling-compared-2026","title":"Monorepo Tooling Compared: What You Actually Need","excerpt":"Monorepo tools solve task orchestration and caching, not repository layout. Here is what each tier provides and how to tell when you have outgrown the simple option.","category":"code","date":"August 19, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":150}],"newer":{"slug":"what-is-a-vpn-protocol-2026","title":"What Is a VPN Protocol in 2026: The Plain Explainer","excerpt":"A VPN protocol is the underlying rulebook that decides how your traffic gets encrypted and tunneled. Here is what that means in practice and how the main options compare in 2026.","category":"tech","date":"July 21, 2026","author":"ByteLedger Team","readTime":"3 min read","hue":130},"older":{"slug":"what-is-a-world-model-2026","title":"What is a world model in 2026: AI that simulates before it acts","excerpt":"A world model is an internal simulation an AI uses to predict what happens next before committing to an action. Here is what that means in practice for 2026.","category":"ai","date":"July 21, 2026","author":"ByteLedger Team","readTime":"4 min read","hue":305}}