Web Worker

简介

Web Worker（工作线程）是HTML5中提出的概念，分为俩汇总类型，

  • 专用线程（Dedicated Web Worker）：专用线程仅能被创建它的脚本所使用（一个专用线程独对应一个主线程）。
  • 共享线程（Shared Web Worker）：而共享线程能够在不同的脚本下进行使用（一共共享线程对应多个主线程）。

专用线路可以看做是默认情况的WebWorker，加上修饰词的目的是为了与主线程进行区分。

用途

Web Worker 的意义在于可以将一些耗时的数据处理操作从主线程中剥离，使主线程更加专注于页面渲染和交互。

  • 懒加载
  • 文本分析
  • 流媒体数据处理
  • canvas 图形绘制
  • 图像处理

注意

  • 有同源限制
  • 无法访问DOM节点
  • 运行在一个上下文中，无法使用Window对象
  • WebWorker的运行不会影响主线程，但主线程交互时仍收到主线程单线程的瓶颈制约。换言之，如果Worker线程频繁与主线程进行交互，主线程由于需要处理交互，仍有可能使页面发生阻塞
  • 共享线程可以被多个浏览上下文调用（Browsing context）调用，但所有这些浏览上下文必须同源（相同协议，主机和端口号）

Worker上下文

  Worker执行的上下文，与主页面执行时的上下文并不相同，最顶层的对象并不是window，而是WorkerGlobalScope，所以无法访问window、以及与window相关的DOM API，但是可以与setTimeout、setInterval等协作。

WorkerGlobalScope作用域下的常用属性、方法：

1、self： WorkerGlobalScope 的 self 属性对对象本身的引用；
2、location：location 属性返回当线程被创建出来的时候与之关联的 WorkerLocation对象，它表示用于初始化这个工作线程的脚步资源的绝对 URL，即使页面被多次重定向后，这个 URL 资源位置也不会改变；
3、close：关闭当前线程；
4、importScripts：通过importScripts()方法通过url在worker中加载库函数；
5、XMLHttpRequest：能发出Ajax请求，但是XMLHttpRequest的responseXML和channel属性总会返回null；
6、能调用setTimeout/setInterval以及addEventListener/postMessage等；
具体分类为为：
时间相关
clearInterval()
clearTimeout()
setInterval()
setTimeout
Worker 相关
importScripts()
close()
postMessage()
存储相关
Cache
IndexedDB
网络相关
Fetch
WebSocket
XMLHttpRequest

支持

根据 CanI Use 网站的统计，目前约有98.01% 的浏览器支持专用线程。而对于共享线程，则仅有大约 41.66% 的浏览器支持。

if (window.Worker) {
    // ...
}
if (window.SharedWorker) {
    // ...
}

专用线程

线程创建

专用线程由Worker()方法创建，可以接收俩个参数，第一个参数是必填的脚本的URL，第二个参数是可选的配置对象options，可以指定type、credentials、name三个属性

URL

是一个DOMString表示worker将执行的脚本的URL。它必须遵循同源策略。

options

包含可以再创建对象实例时设置的选项的属性的对象。可用属性如下

  • type：用以指定 worker 类型的 DOMString 值. 该值可以是 classic 或 module. 如果未指定，将使用默认值 classic.
  • credentials：用以指定 worker 凭证的 DOMString 值.该值可以是 omit, same-origin，或 include.。如果未指定，或者 type 是 classic，将使用默认值 omit (不要求凭证)。
  • name：在 DedicatedWorkerGlobalScope 的情况下，用来表示 worker 的 scope 的一个 DOMString 值，主要用于调试目的。

通常形式创建worker线程

var worker = new Worker('worker.js')
//var worker = new Worker('worker.js', { name: 'workerName'})

另外，通过URL.createObjectURL()创建URL对象，可以实现创建内嵌的worker：

var myTask = `
    //js脚本执行代码
`;
//创建Blob对象
var blob = new Blob([myTask]);
//创建worker线程
var worker = new Worker(window.URL.createObjectURL(blob));

线程数据通讯

Worker与其主页面之间通讯是通过onmessage事件和postMessage()方法实现的。注意：在主页面与Woker之间传递的数据是通过复制实现的，而不是在内存中共享完成的：

传给Worker的对象需要经过序列化，接下来在另一端还需要反序列化。页面与Woker不会共享一个实例，最终的结果就是在每次通信结束时生成了数据的一个副本。简而言之，Woker与其主页面之间只能单纯的传递数据，不能传递复杂的引用类型：如果通过构造函数创建的对象等。并且，传递的数据也是经过拷贝生成的一个副本，在一段对数据修改不会影响另一端

// 主线程
var worker = new Worker('worker.js')
//主线程传递数据给worker线程
worker.postMessage("hello worker")
//主线程接受worker线程传递过来的数据
worker.onmessage = function(e) {
  console.log(e.data)
}
// Worker 线程
//接受主线程传递过来的数据
onmessage = function (e) {
  if (e.data) {
      //worker向主线程传递数据
    postMessage("hello mainjs")
  }
}

关闭Worker

 关闭 Worker的方式有两种：

  • 1、在主线程中使用 terminate()方法；
  • 2、在 Worker 线程中使用close()方法
// 主线程
worker.terminate()
// Dedicated Worker 线程中
self.close()

错误处理

 通过在主线程或Worker 线程中设置 onerror和 onmessageerror的回调函数对错误进行处理:

// 主线程
worker.onerror = function () {
    // 捕捉错误
}

// 主线程使用专用线程
worker.onmessageerror = function () {
    // 捕捉错误
}

// worker 线程
onerror = function () {
    // 捕捉错误
}

onmessageerror = function () {
    // 捕捉错误
}

加载外部脚本importScripts

Web Worker 提供了 importScripts()方法，能够将外部脚本文件加载到 Worker 中:

importScripts('script1.js')
importScripts('script2.js')

// 以上写法等价于
importScripts('script1.js', 'script2.js')

共享线程

共享线程Can I Use上浏览器支持率仅为36.12%，所以不推荐大家使用：

如果非要使用不可，先判断浏览器是否支持：

if (window.SharedWorker) {
  //操作
}

  共享线程的创建和使用方式与专用线程的基本一致，但是要注意以下几点：

//主线程
//使用SharedWorker创建共享线程
var sharedWorker = new SharedWorker('shared-worker.js')
//使用sharedWorker.port调用postMessage、onmessage等方法
sharedWorker.port.postMessage([10, 24])
sharedWorker.port.onmessage = function (e) {
  console.log(e.data)
}

//捕捉错误
sharedWorker.port.onerror = function () {
    // 捕捉错误
}
sharedWorker.port.onmessageerror = function () {
    // 捕捉错误
}

// Worker 线程
onconnect = function (e) {
  //获取port
  let port = e.ports[0]
  //使用port调用postMessage、onmessage等方法
  port.onmessage = function (e) {
   if (e.data.length > 1) {
      port.postMessage()
    }
  }
}

// Shared Worker 线程中关闭线程
self.port.close()

完整实例

由于Web Worker无法加载本地文件，所以要在本地文件创建worker,要通过Blob()方式本地创建：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>worker</title>
</head>
<body>
  <div id="worker">2秒面接受worker线程数据</div>
</body>
<script>
  var myTask = `
    onmessage = function (e) {
      var data = e.data;
      console.log("worker:", data); 
      //设置定时任务，发送数据到主线程
      self.setTimeout(()=>{
        postMessage("hello mainjs");
      },2000)
    };
  `;

  var blob = new Blob([myTask]);
  var worker = new Worker(window.URL.createObjectURL(blob));
  console.log(worker);
  //主线程传递数据给worker线程
  worker.postMessage("hello worker")
  //主线程接受worker线程传递过来的数据
  worker.addEventListener("message",function(e) {
    console.log(e.data)
    document.getElementById("worker").innerHTML = e.data
  })
</script>
</html>

页面一开始显示2秒面接受worker线程数据，刷新页面，等待两秒钟，显示文本修改为hello mainjs，同时观察到控制台输出信息，表明worker和主线程进行数据接受和传递：

Last modification：January 10, 2024
© Allow specification reprint
如果觉得我的文章对你有用，请随意赞赏