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

Web Workers API - Web API 接口参考 | MDN
https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API

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

Web Workers 概念与用法

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

你可以在worker 线程中运行任意的代码,但注意存在一些例外:直接在 worker 线程中操纵 DOM 元素;或使用window 对象中的某些方法和属性。大部分 window 对象的方法和属性是可以使用的,包括 WebSockets,以及诸如 IndexedDB 和 FireFox OS 中独有的 Data Store API 这一类数据存储机制。更多信息请参见: Functions and classes available to workers 。

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

worker 可以另外生成新的 worker,这些 worker 与它们父页面的宿主相同。 此外,worker 可以通过 XMLHttpRequest 来访问网络,只不过 XMLHttpRequest 的 responseXML 和 channel 这两个属性的值将总是 null 。

除了专用 worker 之外,还有一些其他种类的 worker :

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

注意: 根据网络worker规范, worker错误事件不应该冒泡(参见bug 1188141)。该规范已在Firefox 42中实现。

Web Worker 接口

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

示例

我们创建了几个简单的demos以演示基本用法:

你可以在使用web workers中找到有关这些demos是如何工作的更多信息。

规范

规范 状态 评论
HTML Living Standard Living Standard No change from Unknown.

猜你喜欢

转载自www.cnblogs.com/yuanjiangw/p/10782195.html