---
id: html-web-workers
title: "HTML Web Workers"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["Web Workers API", "Worker", "background JavaScript", "postMessage", "HTML5 web worker"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.90
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["html", "web", "frontend", "w3schools", "web-workers", "concurrency", "html5"]
raw_sources: ["https://www.w3schools.com/html/html5_webworkers.asp"]
applied_in: []
github_commit: ""
---
# [[HTML Web Workers]]
## π― ν μ€ ν΅μ°° (One-line insight)
A web worker is an external JavaScript file that runs in the background, independently of other scripts, so heavy computation can run without making the page unresponsive. [S1]
## π§ ν΅μ¬ κ°λ
(Core concepts)
- **Why workers exist** β when executing scripts in an HTML page, the page becomes unresponsive until the script finishes; a worker moves that work off the main thread. [S1]
- **Web worker** β an external JavaScript file that runs in the background, independently of other scripts, without affecting the performance of the page. [S1]
- **Stays interactive** β you can keep clicking and selecting things while the web worker runs in the background. [S1]
- **`postMessage()` / `onmessage`** β the worker posts messages back to the page with `postMessage()`; the page receives them via the worker object's `onmessage` handler. [S1]
- **`terminate()`** β stops a running worker; setting the variable to `undefined` lets it be recreated/reused. [S1]
## 𧩠μΆμΆλ ν¨ν΄ (Extracted patterns)
- **Feature-detect with `typeof(Worker)`** β `if (typeof(Worker) !== "undefined") { ... }`. [S1]
- **Create once** β guard creation with `if (typeof(w) == "undefined") { w = new Worker("demo_workers.js"); }` to avoid duplicate workers. [S1]
- **Message handler updates the DOM** β `w.onmessage = function(event){ ... = event.data; }`. [S1]
- **Stop then reset** β `w.terminate(); w = undefined;`. [S1]
## π μΈλΆ λ΄μ© (Details)
**What is a web worker?**
When executing scripts in an HTML page, the page becomes unresponsive until the script is finished. A web worker is an external JavaScript file that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want β clicking, selecting things, etc. β while the web worker runs in the background. Web workers are useful for heavy code that can't be run on the main thread without causing long tasks that make the page unresponsive. [S1]
**Browser support**
| API | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
**Check web worker support**
```javascript
const x = document.getElementById("result");
if(typeof(Worker) !== "undefined") {
x.innerHTML = "Your browser support Web Workers!";
} else {
x.innerHTML = "Sorry, your browser does not support Web Workers.";
}
```
**Create a web worker file (`demo_workers.js`)**
The important part is the `postMessage()` method, which is used to post messages back to the HTML page. [S1]
```javascript
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
```
**Create the worker object and handle messages**
```javascript
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
```
**Terminate and reuse**
```javascript
w.terminate();
w = undefined;
```
**Full HTML example**
```html
Count numbers:
```
**Web workers and the DOM**
Since web workers are in external `.js` files, they do not have access to the following JavaScript objects: the `window` object, the `document` object, the `parent` object. [S1]
## π οΈ μ μ© μ¬λ‘ (Applied in summary)
The applied case is the counting demo: a worker (`demo_workers.js`) that increments a counter every 500ms and posts each value back, while the page stays responsive and offers Start/Stop buttons. No external project/commit applications found in the source.
## π» μ½λ ν¨ν΄ (Code patterns)
Create a worker once and receive messages (JavaScript):
```javascript
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
```
Worker side β post a message back (JavaScript, in the worker file):
```javascript
postMessage(i);
```
Stop and reset (JavaScript):
```javascript
w.terminate();
w = undefined;
```
## βοΈ λͺ¨μ λ° μ
λ°μ΄νΈ (Contradictions & updates)
No contradictions found in the source. Key constraint: workers run in separate files and cannot access `window`, `document`, or `parent` β they communicate only via messages. [S1]
## β
κ²μ¦ μν λ° μ λ’°λ
- **μν:** draft
- **κ²μ¦ λ¨κ³:** conceptual (μ€μ μ μ© μ¬λ‘ λ°κ²¬ μ applied/validatedλ‘ μΉκ²© κ°λ₯)
- **μΆμ² μ λ’°λ:** B (W3Schools β widely used educational reference, not a primary standards body)
- **μ λ’° μ μ:** 0.90
- **μ€λ³΅ κ²μ¬ κ²°κ³Ό:** μ κ· μμ± (New discovery)
## π μ§μ κ·Έλν (Knowledge Graph)
- **μμ/루νΈ:** [[HTML Tutorial]]
- **κ΄λ ¨ κ°λ
:** [[HTML Web APIs]], [[HTML SSE]], [[HTML Web Storage]], [[HTML Geolocation]]
- **μ°Έμ‘° λ§₯λ½:** Referenced whenever heavy client-side computation must run without freezing the UI.
## π μΆμ² (Sources)
- [S1] W3Schools β HTML Web Workers β https://www.w3schools.com/html/html5_webworkers.asp
## π λ³κ²½ μ΄λ ₯ (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Web Workers" page (Astra wiki-curation, P-Reinforce v3.1 format).