• html
  • 简介
  • 原理
  • 使用
  • 创建
  • 方法
  • 通信
  • 销毁
  • 并发
  • 绘图
🀢

使用 Web Workers

使用 Web Workers 的步骤十分简单。只要在 Worker 类的构造器中，将需要在后台线程中执行的脚本文件的 URL 地址作为参数，然后创建 Worker 对象。

✂️
js
var worker = new Worker('worker.js');

在后台线程中是不能访问页面或窗口对象的，此时如果在后台线程的脚本文件中使用 window 对象或 document 对象，则会引发错误。

另外，可以通过发送和接收消息与后台线程互相传递数据。通过对 Worker 对象的 onmessage 事件获取可以在后台线程之中接收消息。

✂️
js
worker.onmessage = function (event) {
  // 处理收到的消息
};

使用 Worker 对象的 postMessage 方法可以给后台线程发送消息。发送的消息是文本数据，但也可以是任何 JavaScript 对象，需要通过 JSON 对象的 stringify 方法将其转换成文本数据。

✂️
js
worker.postMessage(message);

通过获取 Worker 对象的 onmessage 事件句柄及 Worker 对象的 postMessage 方法可以实现线程内部消息的接收和发送。

检查浏览器支持性

在调用 Web Workers API 函数之前。应该确认当前浏览器是否支持。如果不支持，可以提供一些备用信息，提醒用户使用最新的浏览器。

✂️
js
function testWorker() {
  if (typeof Worker !== 'undefined') {
    document.getElementById('support').innerHTML =
      ' 浏览器不支持 HTML5 WebWorkers';
  }
}

在上面代码中，使用 testWorker 函数来检测浏览器的支持情况，可在页面加载时调用该函数。调用 typeof(Worker) 会返回全局 window 对象的 Worker 属性，如果浏览器不支持 Web Workers API ，则返回结果将是 undefined 。上面这段代码在检测了浏览器支持性之后，会将检测结果反馈到页面上 。