---
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
<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
  const x = document.getElementById("result");
  if (typeof(Worker) !== "undefined") {
    if (typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      x.innerHTML = event.data;
    };
  } else {
    x.innerHTML = "Sorry! No Web Worker support.";
  }
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>
```

**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).
