---
title: Web Worker API
slug: Web/API/Web_Workers_API
translation_of: Web/API/Web_Workers_API
---
<p>{{DefaultAPISidebar("Web Workers API")}}</p>

<p class="summary"><strong>Web Workers </strong>ermöglichen Entwicklern Skripte in einem Hintergrundthread getrennt vom Haupthread auszuführen. Dies hat den Vorteil, dass rechenintensive Operationen in einem gesonderten Thread ausgeführt werden können und somit der Hauptthread, der für gewöhnlich das UI bereitstellt, arbeiten kann ohne verlangsamt oder blockiert zu werden.</p>

<h2 id="Web_Workers_Konzepte_und_Anwendung">Web Workers Konzepte und Anwendung</h2>

<p>Ein Worker ist ein Objekt das mit einem Konstruktor erzeugt wird (beispielsweise {{domxref("Worker.Worker", "Worker()")}}) und eine JavaScript Datei mit Namen ausführt. In dieser Datei ist der Code enthalten der im Worker-Thread ausgeführt wird. Worker arbeiten in einem eigenen globalen Kontext, der vom aktuellen Hauptkontext {{domxref("window")}} verschieden ist. Dieser Kontext ist durch das Objekt  {{domxref("DedicatedWorkerGlobalScope")}}  repräsentiert, falls es sich um einen dedizierten Worker handelt (also einen Worker der nur von einem Skript genutzt wird, was der Standard ist.). Shared Workers benutzen das Objekt {{domxref("SharedWorkerGlobalScope")}}.</p>

<p>Man kann bis auf einige Ausnahmen beliebige Anweisungen ausführen. Beispielsweise kann man das DOM nicht direkt ändern und auch einige Standardmethoden und -attribute von {{domxref("window")}} können nicht genutzt werden. Viele andere Elemente von <code>window</code> können allerdings schon genutzt werden, unter anderem <a href="/en-US/docs/WebSockets">WebSockets</a> und Datenspeicher, wie <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> und die Firefox-OS-only <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a>.  Unter <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a> finden Sie mehr Details.</p>

<p>Daten werden zwischen den Workern und dem Hauptthread mithilfe eines Nachrichtensystems verschickt — beide Seiten verschicken ihre Nachrichten mit der <code>postMessage()</code> Methode und antworten mit dem <code>onmessage</code> Event Handler (die empfangene Nachricht ist im <code>data</code> Attribut {{event("Message")}} des Events enthalten). Die Daten werden kopiert und nicht geteilt.</p>

<p>Worker können neue Worker erzeugen, solange diese vom selben Ursprung gehosted werden wie die Ursprungsseite.  Außerdem können Worker <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> für Netzwerk I/O benutzen mit der Ausnahme, dass  die <code>responseXML</code> und <code>channel</code> Attribute von <code>XMLHttpRequest</code> stets <code>null</code> zurückgeben.</p>

<p>Neben dedizierten Workern gibt es noch andere Typen:</p>

<ul>
 <li>Shared (geteilte) Worker können von mehreren Skripten, die auch in unterschiedlichen Fenstern, IFrames, etc. laufen genutzt werden, solange sie alle in der selben Domain arbeiten. Sie sind etwas komplizierter als dedizierte Worker — Skripte müssen über einen aktiven Port kommunizieren. Unter {{domxref("SharedWorker")}} finden Sie mehr Details.</li>
 <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a> arbeiten als Proxy Server zwischen Webanwendungen, dem Browser und dem Netzwerk. Sie sollen (zusammen mit anderen Technologien)  das Erstellen von effektiven offline-Anwendungen ermöglichen, Netzwerkabfragen abfangen und je nach Verfügbarkeit einer Netzwerkverbindung ensprechend reagieren und den Server über Änderungen informieren. Zudem erlauben sie Push-Benachrichtigungen zu senden und im Hintergrund APIs zu synchronisieren.</li>
 <li>Chrome Worker ist ein Firefox-only Workertyp für die Add-On Entwicklung mit Zugriff auf  <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a> in Ihrem Worker. Unter  {{domxref("ChromeWorker")}} finden Sie weitere Informationen.</li>
 <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Worker</a> bieten die Möglichkeit Audioverarbeitung mit Skripten in einem Worker auszuführen.</li>
</ul>

<div class="note">
<p><strong>Note</strong>: As per the <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Web workers Spec</a>, worker error events should not bubble (see {{bug(1188141)}}. This has been implemented in Firefox 42.</p>
</div>

<h2 id="Web_Worker_interfaces">Web Worker interfaces</h2>

<dl>
 <dt>{{domxref("AbstractWorker")}}</dt>
 <dd>Abstrakte Attribute und Methoden für alle Worker (z.B. {{domxref("Worker")}} oder {{domxref("SharedWorker")}}).</dd>
 <dt>{{domxref("Worker")}}</dt>
 <dd>Repräsentiert einen laufenden Workerthread. Erlaubt das Senden von Nachrichten an den Code im Worker.</dd>
 <dt>{{domxref("WorkerLocation")}}</dt>
 <dd>Definiert die absolute Quelle des Skripts das im  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker" title="The Worker interface of the Web Workers API represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the Worker() constructor and specifying a script to be run in the worker thread."><code>Worker</code></a> ausgeführet wird.</dd>
</dl>

<dl>
 <dt>{{domxref("SharedWorker")}}</dt>
 <dd>Repräsentiert einen speziellen Worker, auf den von verschiedenen Fenstern, IFrames oder sogar Workern  zugegrifffen werden kann.</dd>
 <dt>{{domxref("WorkerGlobalScope")}}</dt>
 <dd>Repräsentiert den generischen Scope jedes Workers (dies entspricht dem {{domxref("Window")}} objekt für normale Webinhalte). Andere Worker haben Scopes die von diesem vererbt werden und spezifische Eigenschaften hinzufügen.</dd>
 <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
 <dd>Repräsentiert den von {{domxref("WorkerGlobalScope")}} vererbten Scope eines dedizierten Workers. Fügt besondere Eigenschaften hinzu.</dd>
 <dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
 <dd>Repräsentiert den von {{domxref("WorkerGlobalScope")}} vererbten Scope eines  Shared Workers. Fügt besondere Eigenschaften hinzu.</dd>
 <dt>{{domxref("WorkerNavigator")}}</dt>
 <dd>Repräsentiert die Identität und den Zustand des User Agents (dem client).</dd>
</dl>

<h2 id="Beispiele">Beispiele</h2>

<p>Sie finden ein paar einfache Beispiele, die die Benutzung veranschaulichen unter diesen Links:</p>

<ul>
 <li><a href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</li>
 <li><a href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>).</li>
</ul>

<p>Unter <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a> finden Sie mehr Informationen wie diese Demos funktionieren.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#workers')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>4</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
   <td>10.0</td>
   <td>10.6</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Shared workers</td>
   <td>4</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop(29)}}</td>
   <td>{{CompatNo}}</td>
   <td>10.6</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Passing data using structured cloning</td>
   <td>13</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(8)}}</td>
   <td>10.0</td>
   <td>11.5</td>
   <td>6</td>
  </tr>
  <tr>
   <td>Passing data using  transferable objects</td>
   <td>17 {{property_prefix("webkit")}}<br>
    21</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop(18)}}</td>
   <td>{{CompatNo}}</td>
   <td>15</td>
   <td>6</td>
  </tr>
  <tr>
   <td>Global {{domxref("window.URL", "URL")}}</td>
   <td>10<sup>[1]</sup><br>
    23</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(21)}}</td>
   <td>11</td>
   <td>15</td>
   <td>6<sup>[1]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>4.4</td>
   <td>4</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(1.9.1)}}</td>
   <td>1.0.1</td>
   <td>10.0</td>
   <td>11.5</td>
   <td>5.1</td>
  </tr>
  <tr>
   <td>Shared workers</td>
   <td>{{CompatNo}}</td>
   <td>4</td>
   <td>{{CompatNo}}</td>
   <td>29</td>
   <td>1.4</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Passing data using structured cloning</td>
   <td>{{CompatNo}}</td>
   <td>4</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>8</td>
   <td>1.0.1</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Passing data using  transferable objects</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>18</td>
   <td>1.0.1</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] As <code>webkitURL</code>.</p>

<h2 id="Weiterführend">Weiterführend</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Using Web Workers</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Worker Interface</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">SharedWorker interface</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
 <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a></li>
 <li><a href="/en-US/docs/Web/API/Web_Workers_API/Advanced_concepts_and_examples">Advanced concepts and examples</a></li>
 <li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a>: Um worker mit privilegierten/chrome Code zu nutzen</li>
</ul>