【js进阶】Web Worker当之无愧的性能利器！

最新推荐文章于 2024-06-22 21:32:10 发布

goodlovingz

最新推荐文章于 2024-06-22 21:32:10 发布

阅读量867

点赞数

分类专栏：前端文章标签： javascript web worker js进阶页面后台

本文链接：https://blog.csdn.net/qq_31967985/article/details/111067280

版权

前端专栏收录该内容

41 篇文章 7 订阅

订阅专栏

在这里插入图片描述

文章目录

一、简介

MDN上关于Web Worker的描述如下：

Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。一旦创建，一个worker 可以将消息发送到创建它的JavaScript代码, 通过将消息发布到该代码指定的事件处理程序（反之亦然）。

1、Web Worker类型可以分为两种

1)专用线程（Dedicated Web Worker）：仅能被创建它的脚本所使用（一个专用线程对应一个主线程）；
2)共享线程（Shared Web Worker）：能够在不同的脚本中使用（一个共享线程对应多个主线程）。

2、Web Worker的使用场景

从主线程中剥离出一些耗时的处理操作在后台线程中执行，主线程集中资源进行页面渲染和用户交互；大致可以在以下情境中运用：

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

3、Web Worker的限制

根据上述描述，web worker对于耗时操作来说简直就是美好的解决方案；但是，它自身也是有诸多限制的：

同源限制，只有运行在同源的父页面中，workers可以依次生成新的workers；
无法访问父页面的 DOM 节点；`
不能使用window对象的默认方法和属性；
当Web Worker 线程与主线程 频繁进行交互，主线程由于需要处理交互，仍有可能使页面发生阻塞；
共享线程上下文必须同源（相同的协议，主机和端口号）;

4、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

在这里插入图片描述

二、专用线程（Dedicated Web Worker）

专用线程Can I Use上浏览器支持率为98.01%，所以大家可以放心使用：
在这里插入图片描述
但是使用的时候尽量先判断浏览器是否支持：

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

1、线程创建

专用线程由 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));

2、线程数据通讯方式

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

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

// 主线程
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")
  }
}

3、关闭 Worker

关闭 Worker的方式有两种：

1、在主线程中使用 terminate()方法；
2、在 Worker 线程中使用close()方法

// 主线程
worker.terminate()

// Dedicated Worker 线程中
self.close()

4、错误处理

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

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

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

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

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

5、加载外部脚本importScripts

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

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

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

三、共享线程（Shared Web Worker）

共享线程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>