Files

T

koriweb 9609c04755 docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더).
- Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외)
- Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체)
- Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속)
각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-06-23 19:21:18 +09:00

6.3 KiB

Raw Blame History

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

title

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

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]

var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

Create the worker object and handle messages

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

Terminate and reuse

w.terminate();

w = undefined;

Full HTML example

<!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):

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):

postMessage(i);

Stop and reset (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).

6.3 KiB Raw Blame History