---
title: Web Workers API
slug: Web/API/Web_Workers_API
tags:
  - API
  - DOM
  - Service Workers
  - Shared Workers
  - Web Workers
  - Workers
translation_of: Web/API/Web_Workers_API
---
<p>{{DefaultAPISidebar("Web Workers API")}}</p>

<p class="summary">通过使用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是UI线程）不会因此被阻塞/放慢。</p>

<h2 id="Web_Workers_概念与用法">Web Workers 概念与用法</h2>

<p>使用构造函数（例如,{{domxref("Worker.Worker", "Worker()")}}）创建一个<strong> worker</strong> 对象, 构造函数接受一个 JavaScript文件URL — 这个文件包含了将在 worker 线程中运行的代码。worker 将运行在与当前 {{domxref("window")}}不同的另一个全局上下文中，这个上下文由一个对象表示，标准情况下为{{domxref("DedicatedWorkerGlobalScope")}} （标准 workers 由单个脚本使用; 共享workers使用{{domxref("SharedWorkerGlobalScope")}}）。</p>

<p>你可以在worker 线程中运行任意的代码，但注意存在一些例外：直接在 worker 线程中操纵 DOM 元素；或使用{{domxref("window")}} 对象中的某些方法和属性。大部分 window 对象的方法和属性是可以使用的，包括 <a href="/en-US/docs/WebSockets">WebSockets</a>，以及诸如 <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> 和 FireFox OS 中独有的 <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a> 这一类数据存储机制。更多信息请参见： <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a> 。</p>

<p>主线程和 worker 线程相互之间使用 <code>postMessage()</code> 方法来发送信息, 并且通过 <code>onmessage</code> 这个 event handler来接收信息（传递的信息包含在 {{event("Message")}} 这个事件的<code>data</code>属性内) 。数据的交互方式为传递副本，而不是直接共享数据。</p>

<p>worker 可以另外生成新的 worker，这些 worker 与它们父页面的宿主相同。 此外，worker 可以通过 <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> 来访问网络，只不过 <code>XMLHttpRequest</code> 的 <code>responseXML</code> 和 <code>channel</code> 这两个属性的值将总是 <code>null 。</code></p>

<p>除了专用 worker 之外，还有一些其他种类的 worker ：</p>

<ul>
 <li>Shared Workers 可被不同的窗体的多个脚本运行，例如IFrames等，只要这些workers处于同一主域。共享worker 比专用 worker 稍微复杂一点 — 脚本必须通过活动端口进行通讯。详情请见{{domxref("SharedWorker")}}。</li>
 <li><a href="/zh-CN/docs/Web/API/Service_Worker_API">Service Workers</a> 一般作为web应用程序、浏览器和网络（如果可用）之间的代理服务。他们旨在（除开其他方面）创建有效的离线体验，拦截网络请求，以及根据网络是否可用采取合适的行动，更新驻留在服务器上的资源。他们还将允许访问推送通知和后台同步API。</li>
 <li>Chrome Workers 是一种仅适用于firefox的worker。如果您正在开发附加组件，希望在扩展程序中使用worker且可以访问 <a href="https://developer.mozilla.org/en/js-ctypes" title="en/js-ctypes">js-ctypes</a>，那么可以使用Chrome Workers。详情请见{{domxref("ChromeWorker")}}</li>
 <li>音频<a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers"> Workers</a>可以在网络worker上下文中直接完成脚本化音频处理.</li>
</ul>

<div class="note">
<p><span style="font-size: 14px;"><strong>注意</strong></span>: 根据网络worker规范， worker错误事件不应该冒泡（参见{{bug(1188141)}}）。该规范已在Firefox 42中实现。</p>
</div>

<h2 id="Web_Worker_接口">Web Worker 接口</h2>

<dl>
 <dt>{{domxref("AbstractWorker")}}</dt>
 <dd>抽象属性和方法是所有类型的worker中常用的（例如{{domxref("Worker")}}或 {{domxref("SharedWorker")}}）</dd>
 <dt>{{domxref("Worker")}}</dt>
 <dd>表示正在运行的worker线程，允许你将信息传递到正在运行的worker程序代码。</dd>
 <dt>{{domxref("SharedWorker")}}</dt>
 <dd>表示一种可以同时被多个浏览器环境访问的特殊类型的worker。这些浏览器环境可以是多个window, iframes 或者甚至是多个worker.</dd>
 <dt>{{domxref("WorkerGlobalScope")}}</dt>
 <dd>表示任意worker的通用作用域（对于正常的网页类容来说与{{domxref("Window")}} 有相同的作用）。不同类型的worker都有从接口继承作用于对象，并且可以添加更多特定功能。</dd>
 <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
 <dd>表示一个专用worker的作用域， 继承自{{domxref("WorkerGlobalScope")}}，且可添加一些特有的功能。</dd>
 <dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
 <dd>表示一个共享worker的作用域， 继承自{{domxref("WorkerGlobalScope")}}， 且可添加一些特有的功能。</dd>
 <dt>{{domxref("WorkerNavigator")}}</dt>
 <dd>表示用户代理（客户端）的身份和状态。</dd>
</dl>

<h2 id="示例">示例</h2>

<p>我们创建了几个简单的demos以演示基本用法：</p>

<ul>
 <li><a href="https://github.com/mdn/simple-web-worker">基本的dedicated worker示例</a> (<a href="http://mdn.github.io/simple-web-worker/">运行dedicated worker</a>).</li>
 <li><a href="https://github.com/mdn/simple-shared-worker">基本的 shared worker示例</a> (<a href="http://mdn.github.io/simple-shared-worker/">运行shared worker</a>).</li>
</ul>

<p>你可以在<a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">使用web workers</a>中找到有关这些demos是如何工作的更多信息。</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">评论</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#toc-workers')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No change from {{SpecName("Web Workers")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('Web Workers')}}</td>
   <td>{{Spec2('Web Workers')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="相关链接"><span style="font-size: 2.33333rem; letter-spacing: -0.00278rem;">相关链接</span></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>: for using workers in privileged/chrome code</li>
</ul>