乐趣区

关于javascript:Web-Worker-使用教程

转载自 阮一峰老师的《Web Worker 应用教程》

1 概述

JavaScript 语言采纳的是单线程模型,也就是说,所有工作只能在一个线程上实现,一次只能做一件事。后面的工作没做完,前面的工作只能等着。随着电脑计算能力的加强,尤其是多核 CPU 的呈现,单线程带来很大的不便,无奈充分发挥计算机的计算能力

Web Worker 的作用,就是为 JavaScript 发明多线程环境,容许主线程创立 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后盾运行,两者互不烦扰。等到 Worker 线程实现计算工作,再把后果返回给主线程。这样的益处是,一些计算密集型或高提早的工作,被 Worker 线程累赘了,主线程(通常负责 UI 交互)就会很晦涩,不会被阻塞或拖慢。

Worker 线程一旦新建胜利,就会始终运行,不会被主线程上的流动(比方用户点击按钮、提交表单)打断。这样有利于随时响应主线程的通信。然而,这也造成了 Worker 比拟消耗资源,不应该适度应用,而且一旦应用结束,就应该敞开。

Web Worker 有以下几个应用留神点。
1:同源限度
调配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源
2:DOM 限度
Worker 线程所在的全局对象,与主线程不一样,无奈读取主线程所在网页的 DOM 对象,也无奈应用documentwindowparent 这些对象。然而,Worker 线程能够 navigator 对象和 location 对象。
3:通信联系
Worker 线程和主线程不在同一个上下文环境,它们不能间接通信,必须通过音讯实现
4:脚本限度
Worker 线程不能执行alert() 办法和 confirm() 办法,但能够应用 XMLHttpRequest 对象收回 AJAX 申请。
5:文件限度
Worker 线程无奈读取本地文件,即不能关上本机的文件系统(file://),它所加载的脚本,必须来自网络。

2 根本用法

2.1 主线程

主线程采纳 new 命令,调用 Worker() 构造函数,新建一个 Worker 线程

var worker = new Worker('work.js');

Worker()构造函数的参数是一个脚本文件,该文件就是 Worker 线程所要执行的工作。因为 Worker 不能读取本地文件,所以这个脚本必须来自网络。如果下载没有胜利(比方 404 谬误),Worker 就会默默地失败。

而后,主线程调用 worker.postMessage() 办法,向 Worker 发消息。

worker.postMessage('Hello World');
worker.postMessage({method: 'echo', args: ['Work']});

worker.postMessage()办法的参数,就是主线程传给 Worker 的数据。它能够是各种数据类型,包含二进制数据。

接着,主线程通过 worker.onmessage 指定监听函数,接管子线程发回来的音讯。

worker.onmessage = function (event) {console.log('Received message' + event.data);
  doSomething();}

function doSomething() {
  // 执行工作
  worker.postMessage('Work done!');
}

下面代码中,事件对象的 data 属性能够获取 Worker 发来的数据。

Worker 实现工作当前,主线程就能够把它关掉。

worker.terminate();

2.2 Worker 线程

Worker 线程外部须要有一个监听函数,监听 message 事件。

self.addEventListener('message', function (e) {self.postMessage('You said:' + e.data);
}, false);

下面代码中,self代表子线程本身,即子线程的全局对象。因而,等同于上面两种写法。

// 写法一
this.addEventListener('message', function (e) {this.postMessage('You said:' + e.data);
}, false);

// 写法二
addEventListener('message', function (e) {postMessage('You said:' + e.data);
}, false);

除了应用 self.addEventListener() 指定监听函数,也能够应用 self.onmessage 指定。监听函数的参数是一个事件对象,它的 data 属性蕴含主线程发来的数据。self.postMessage()办法用来向主线程发送音讯。

依据主线程发来的数据,Worker 线程能够调用不同的办法,上面是一个例子。

self.addEventListener('message', function (e) {
  var data = e.data;
  switch (data.cmd) {
    case 'start':
      self.postMessage('WORKER STARTED:' + data.msg);
      break;
    case 'stop':
      self.postMessage('WORKER STOPPED:' + data.msg);
      self.close(); // Terminates the worker.
      break;
    default:
      self.postMessage('Unknown command:' + data.msg);
  };
}, false);

下面代码中,self.close()用于在 Worker 外部敞开本身。

2.3 Worker 加载脚本

Worker 外部如果要加载其余脚本,有一个专门的办法importScripts()

importScripts('script1.js');
// 该办法能够同时加载多个脚本。importScripts('script1.js', 'script2.js');

2.4 错误处理

主线程能够监听 Worker 是否产生谬误。如果产生谬误,Worker 会触发主线程的 error 事件。

worker.onerror(function (event) {
  console.log(['ERROR: Line', e.lineno, 'in', e.filename, ':', e.message].join(''));
});

// 或者
worker.addEventListener('error', function (event) {// ...});

Worker 外部也能够监听 error 事件。

2.5 敞开 Worker

应用结束,为了节俭系统资源,必须敞开 Worker。

// 主线程
worker.terminate();

// Worker 线程
self.close();

3 数据通信

后面说过,主线程与 Worker 之间的通信内容,能够是文本,也能够是对象。须要留神的是,这种通信是拷贝关系,即是传值而不是传址,Worker 对通信内容的批改,不会影响到主线程。事实上,浏览器外部的运行机制是,先将通信内容串行化,而后把串行化后的字符串发给 Worker,后者再将它还原。

主线程与 Worker 之间也能够替换二进制数据,比方 File、Blob、ArrayBuffer 等类型,也能够在线程之间发送。上面是一个例子。


// 主线程
var uInt8Array = new Uint8Array(new ArrayBuffer(10));
for (var i = 0; i < uInt8Array.length; ++i) {uInt8Array[i] = i * 2; // [0, 2, 4, 6, 8,...]
}
worker.postMessage(uInt8Array);

// Worker 线程
self.onmessage = function (e) {
  var uInt8Array = e.data;
  postMessage('Inside worker.js: uInt8Array.toString() =' + uInt8Array.toString());
  postMessage('Inside worker.js: uInt8Array.byteLength =' + uInt8Array.byteLength);
};

然而,拷贝形式发送二进制数据,会造成性能问题。比方,主线程向 Worker 发送一个 500MB 文件,默认状况下浏览器会生成一个原文件的拷贝。为了解决这个问题,JavaScript 容许主线程把二进制数据间接转移给子线程,然而一旦转移,主线程就无奈再应用这些二进制数据了,这是为了防止出现多个线程同时批改数据的麻烦场面。这种转移数据的办法,叫做 Transferable Objects。这使得主线程能够疾速把数据交给 Worker,对于影像解决、声音解决、3D 运算等就十分不便了,不会产生性能累赘。

如果要间接转移数据的控制权,就要应用上面的写法。

// Transferable Objects 格局
worker.postMessage(arrayBuffer, [arrayBuffer]);

// 例子
var ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);

4 同页面的 Web Worker

通常状况下,Worker 载入的是一个独自的 JavaScript 脚本文件,然而也能够载入与主线程在同一个网页的代码。

<body>
  <script id="worker" type="app/worker">
    self.addEventListener('message', function (e) {console.log(e,e.data)
      postMessage('some message');
    }, false);
  </script>
  <script>
    var blob = new Blob([document.querySelector('#worker').textContent]);
    var url = window.URL.createObjectURL(blob);
    var worker = new Worker(url);

    worker.postMessage('Hello World');
    worker.onmessage = function (e) {console.log('worker', e);
    };
  </script>
</body>

下面是一段嵌入网页的脚本,留神必须指定 <script> 标签的 type 属性是一个浏览器不意识的值,上例是app/worker

而后,读取这一段嵌入页面的脚本,用 Worker 来解决。

var blob = new Blob([document.querySelector('#worker').textContent]);
var url = window.URL.createObjectURL(blob);
var worker = new Worker(url);

worker.onmessage = function (e) {// e.data === 'some message'};

下面代码中,先将嵌入网页的脚本代码,转成一个二进制对象,而后为这个二进制对象生成 URL,再让 Worker 加载这个 URL。这样就做到了,主线程和 Worker 的代码都在同一个网页下面。

5 实例:Worker 线程实现轮询

有时,浏览器须要轮询服务器状态,以便第一工夫得悉状态扭转。这个工作能够放在 Worker 外面。

function createWorker(f) {var blob = new Blob(['(' + f.toString() +')()']);
  var url = window.URL.createObjectURL(blob);
  var worker = new Worker(url);
  return worker;
}

var pollingWorker = createWorker(function (e) {
  var cache;

  function compare(new, old) {...};

  setInterval(function () {fetch('/my-api-endpoint').then(function (res) {var data = res.json();

      if (!compare(data, cache)) {
        cache = data;
        self.postMessage(data);
      }
    })
  }, 1000)
});

pollingWorker.onmessage = function () {// render data}

pollingWorker.postMessage('init');

下面代码中,Worker 每秒钟轮询一次数据,而后跟缓存做比拟。如果不统一,就阐明服务端有了新的变动,因而就要告诉主线程。

6 实例:Worker 新建 Worker

Worker 线程外部还能再新建 Worker 线程(目前只有 Firefox 浏览器反对)。上面的例子是将一个计算密集的工作,调配到 10 个 Worker。

主线程代码如下。

var worker = new Worker('worker.js');
worker.onmessage = function (event) {document.getElementById('result').textContent = event.data;
};

Worker 线程代码如下。

// settings
var num_workers = 10;
var items_per_worker = 1000000;

// start the workers
var result = 0;
var pending_workers = num_workers;
for (var i = 0; i < num_workers; i += 1) {var worker = new Worker('core.js');
  worker.postMessage(i * items_per_worker);
  worker.postMessage((i + 1) * items_per_worker);
  worker.onmessage = storeResult;
}

// handle the results
function storeResult(event) {
  result += event.data;
  pending_workers -= 1;
  if (pending_workers <= 0)
    postMessage(result); // finished!
}

下面代码中,Worker 线程外部新建了 10 个 Worker 线程,并且顺次向这 10 个 Worker 发送音讯,告知了计算的终点和起点。计算工作脚本的代码如下。

var start;
onmessage = getStart;
function getStart(event) {
  start = event.data;
  onmessage = getEnd;
}

var end;
function getEnd(event) {
  end = event.data;
  onmessage = null;
  work();}

function work() {
  var result = 0;
  for (var i = start; i < end; i += 1) {
    // perform some complex calculation here
    result += 1;
  }
  postMessage(result);
  close();}

7 API

7.1 主线程

浏览器原生提供 Worker() 构造函数,用来供主线程生成 Worker 线程。

var myWorker = new Worker(jsUrl, options);

Worker()构造函数,能够承受两个参数。第一个参数是脚本的网址(必须恪守同源政策),该参数是必须的,且只能加载 JS 脚本,否则会报错。第二个参数是配置对象,该对象可选。它的一个作用就是指定 Worker 的名称,用来辨别多个 Worker 线程。

// 主线程
var myWorker = new Worker('worker.js', { name : 'myWorker'});

// Worker 线程
self.name // myWorker

Worker()构造函数返回一个 Worker 线程对象,用来供主线程操作 Worker。Worker 线程对象的属性和办法如下。

Worker.onerror:指定 error 事件的监听函数。Worker.onmessage:指定 message 事件的监听函数,发送过去的数据在 Event.data 属性中。Worker.onmessageerror:指定 messageerror 事件的监听函数。发送的数据无奈序列化成字符串时,会触发这个事件。Worker.postMessage():向 Worker 线程发送音讯。Worker.terminate():立刻终止 Worker 线程。

7.2 Worker 线程

Web Worker 有本人的全局对象,不是主线程的 window,而是一个专门为 Worker 定制的全局对象。因而定义在window 下面的对象和办法不是全副都能够应用。

Worker 线程有一些本人的全局属性和办法。

self.name:Worker 的名字。该属性只读,由构造函数指定。self.onmessage:指定 message 事件的监听函数。self.onmessageerror:指定 messageerror 事件的监听函数。发送的数据无奈序列化成字符串时,会触发这个事件。self.close():敞开 Worker 线程。self.postMessage():向产生这个 Worker 线程发送音讯。self.importScripts():加载 JS 脚本。
退出移动版