aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/web_workers_api/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/web_workers_api/index.html
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/zh-cn/web/api/web_workers_api/index.html')
-rw-r--r--files/zh-cn/web/api/web_workers_api/index.html102
1 files changed, 102 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/web_workers_api/index.html b/files/zh-cn/web/api/web_workers_api/index.html
new file mode 100644
index 0000000000..d9ee40bbaa
--- /dev/null
+++ b/files/zh-cn/web/api/web_workers_api/index.html
@@ -0,0 +1,102 @@
+---
+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>