WebWorker 其实没那么难

前言

        很多同学在学习一些技术时,并没有理解这些技术所能解决的问题,没有这些技术会导致怎样的问题。结果在学了之后,只学了一个皮毛,学了有哪些 API,在项目中又难以去运用。本篇文章将从问题出发,探讨 WebWorker 是怎么来应用的。

概念

        首先,我们必须知道的是 JavaScript 是单线程模型,即使通过事件循环、Web Workers、多进程/多线程浏览器架构以及异步API,让 JavaScript能够以一种看起来像是并行的方式执行代码,但其本质依然是单线程模型。

        为了更加深刻的理解单线程模型,我们以如下代码为例:

<script>

function fib(n) {
  if (n < 2) {
    return n;
  }
  return fib(n - 1) + fib(n - 2);
}

fib(45);

const el = document.createElement('div');
el.innerHTML = 'Hello Web Worker';
document.documentElement.appendChild(el);
</script>

WebWorker 其实没那么难

        当我们刷新网页时,浏览器经历了很长的时间后,才停止旋转。这是因为页面中有JavaScript代码在执行且耗时过长,阻塞UI更新

        为了解决这个问题,出现了 Web Worker,为创造了多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的时候,Worker 线程也在运行

<script>
var worker = new Worker('fib_worker.js');

const el = document.createElement('div');
el.innerHTML = 'Hello Web Worker';
document.documentElement.appendChild(el);
</script>
// fib_worker.js
function fib(n) {
  if (n < 2) {
    return n;
  }
  return fib(n - 1) + fib(n - 2);
}

const result = fib(45);

console.log('result is ', result);

WebWorker 其实没那么难

        可以看到,当刷新浏览器时,浏览器渲染按钮立即结束,且过了很长时间控制台输出 fib(45) 的结果,可以看到 worker 线程并不会阻塞主线程。通过这个例子,想必你对 WebWorker 基本的使用有了一定的认识,后面我们将举出更多的例子去理解 WebWorker。

基本用法

Worker 创建

// worker.js 文件对应的是所要执行的任务

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

Worker 通信

        主线程与 Worker 之间通信采用的是消息传递机制,具体如下:

// 主线程

// postMessage 发送消息
worker.postMessage('Main Hello World');

// 监听消息
work.onmessage = function (event) {
  console.log('Main Received message ' + event.data);
}

// work 内部出错时   
work.onerror = function (error) { }
// worker 线程

self.postMessage('Worker Hello World');

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

        self 是一个全局对象,它代表了 Worker 线程自身的环境。在 Worker 文件中,self 取代了在普通浏览器环境中全局可用的 window 对象。

Worker 销毁

        worker 执行完任务后,通过销毁可以释放资源。

// 主线程

worker.terminate()
// worker 线程

self.close()
  • worker.terminate() 是在主线程中调用的方法,用于立即终止 Worker 线程。当你调用 terminate() 时,Worker 线程会被强制停止,它不会有机会完成当前正在执行的任务或进行清理工作。这是主线程对 Worker 线程的一种单向控制。

  • self.close() 是在 Worker 线程内部调用的方法,用于优雅地关闭 Worker 线程。当你从 Worker 线程内部调用 close() 时,Worker 线程会完成当前正在执行的任务,然后关闭自己。这种方式允许 Worker 线程在关闭前进行必要的清理工作。

WebWorker 实战

        页面上存在三个输入框,用户可以在任一输入框中输入数字后,输出对应的斐波那契值。

        这里我们将分别给出非 WebWorker 实现、以及 WebWorker 实现两种方式加深对 WebWorker 的理解。

非 WebWorker Demo

        首先,我们举一个不采用 Web worker 实现的示例,可以看到如果输出一个较大的值,整个网页会被阻塞住,我们没办法对网页进行任何操作

WebWorker 其实没那么难

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="box1">
        <input type="number" value="0" />
        <button onclick="clickHandler('box1')">计算</button>
        <span></span>
    </div>

    <div id="box2">
        <input type="number" value="0"/>
        <button onclick="clickHandler('box2')">计算</button>
        <span></span>
    </div>

    <div id="box3">
        <input type="number" value="0"/>
        <button onclick="clickHandler('box3')">计算</button>
        <span></span>
    </div>

    <script>

        function clickHandler(boxId) {
          console.log('clickHandler', boxId);
          const boxEl = document.getElementById(boxId);
          const inputEl = boxEl.getElementsByTagName('input')[0];
          const number = inputEl.value;
          const result = fib(number);
          const spanEl = boxEl.getElementsByTagName('span')[0];
          spanEl.innerHTML = `${number} fib result is ${result}`;
        }

        function fib(n) {
          if (n < 2) {
            return n;
          }
          return fib(n - 1) + fib(n - 2);
        }

    </script>

</body>

</html>

WebWorker Demo

        当我们采用 web worker 实现时,可以看到即使输入很大的值,也不会阻塞其他的输入。

WebWorker 其实没那么难

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="box1">
    <input type="number" value="0" />
    <button onclick="clickHandler('box1')">计算</button>
    <span></span>
  </div>

  <div id="box2">
    <input type="number" value="0"/>
    <button onclick="clickHandler('box2')">计算</button>
    <span></span>
  </div>

  <div id="box3">
    <input type="number" value="0"/>
    <button onclick="clickHandler('box3')">计算</button>
    <span></span>
  </div>
  
  <script>
    const workerMap = {};

    function clickHandler(boxId) {
      let worker = workerMap[boxId];
      if (!worker) {
        worker = new Worker('fib_worker.js');
        workerMap[boxId] = worker;

        worker.onmessage = (event) => {
          const boxEl = document.getElementById(boxId);
          const inputEl = boxEl.getElementsByTagName('input')[0];
          const number = inputEl.value;
          const spanEl = boxEl.getElementsByTagName('span')[0];
          spanEl.innerHTML = `${number} fib result is ${event.data}`;
        }
      }

      const boxEl = document.getElementById(boxId);
      const inputEl = boxEl.getElementsByTagName('input')[0];
      const number = inputEl.value;
      worker.postMessage(number);
    }
  </script>
</body>
</html>

function fib(n) {
  if (n < 2) {
    return n;
  }
  return fib(n - 1) + fib(n - 2);
}

self.onmessage = (event) => {
  const number = event.data;
  const result = fib(number);
  self.postMessage(result);
}

注意事项

        WebWorker 的使用需要遵循如下一些注意事项:

1、同源策略:分配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源。

2、文件限制:Worker 脚本必须来源于网络文件,不能直接运行内敛 JavaScript 或从本地文件系统加载脚本。

3、作用域隔离:每个 Worker 都有自己的全局执行环境,不能在 Worker 中访问主线程中的JavaScript 对象。

4、结构化克隆:传递给Worker的数据通过结构化克隆算法进行复制。这意味着可以传递大多数JavaScript数据结构,但是不能传递DOM元素或函数。

5、DOM 限制:Worker 中无法读取 DOM 对比,也无法使用document、window、parent这些对象。但是,Worker 线程可以navigator对象和location对象。

应用场景

        通过上面的体验,想必你知道了 WebWorker 基本的应用场景,即耗时长会阻塞主线程。以下是一些应用场景和代码示例:

复杂数学计算

        在需要执行复杂计算的情况下,可以使用 Web Worker 来避免阻塞主线程。

// main.js

const worker = new Worker('calculator.js');

worker.onmessage = function(event) {
  console.log('Result from worker:', event.data);
};

worker.postMessage({ type: 'calculate', data: [1, 2, 3, 4, 5] });
// calculator.js

self.onmessage = function(event) {
  if (event.data.type === 'calculate') {
    const result = event.data.data.reduce((sum, num) => sum + num, 0);
    self.postMessage(result);
  }
};

图像处理

        在图像处理应用中,可以在 Worker 中执行图像分析或转换,以避免影响用户体验。

// main.js

const worker = new Worker('image-processor.js');
const image = document.getElementById('myImage');

worker.onmessage = function(event) {
  const processedImage = event.data;
  document.body.appendChild(processedImage);
};

worker.postMessage(image);
// image-processor.js

self.onmessage = function(event) {
const image = event.data;

// 假设有一个图像处理函数 processImage
const processedImage = processImage(image);
self.postMessage(processedImage);
};

数据解析

        当需要解析大型 JSON 或 XML 数据时,可以使用 Worker 来处理,以避免阻塞主线程。

// main.js

const worker = new Worker('data-parser.js');

const data = { /* 大型数据对象 */ };

worker.onmessage = function(event) {
  const parsedData = event.data;
  console.log('Parsed data:', parsedData);
};

worker.postMessage(data);
// data-parser.js

self.onmessage = function(event) {
  const data = event.data;
  // 假设有一个解析函数 parseData
  const parsedData = parseData(data);
  self.postMessage(parsedData);
};

数据同步

        在需要与服务器进行大量数据交换的应用中,可以使用 Worker 来处理数据同步,以避免影响用户体验。

// main.js

const worker = new Worker('worker.js');

worker.onmessage = function(event) {
  console.log('Data received from worker:', event.data);
};

worker.onerror = function(error) {
  console.error('Worker error:', error);
};

worker.postMessage({ type: 'fetchData'url: 'https://api.example.com/data' });
// worker.js

self.onmessage = function(event) {
  if (event.data.type === 'fetchData') {
    fetch(event.data.url)
    .then(response => response.json())
    .then(data => {
        self.postMessage(data);
    })
    .catch(error => {
        self.postMessage({ error: 'An error occurred while fetching the data.' });
    });
  }
};

Vue 中使用 Web Worker

        在 Vue 中使用 Web Worker 略有不同,因为 Webpack、 Vite 等构建工具会对静态资源做处理,对于 Web Worker 而言,需要告知构建工具如何处理 .js 文件的 Worker。

        这里以 Vite 为例,分别支持以下两种方式创建 Web Worker。

使用查询后缀导入

        语法:

import MyWorker from './worker?worker'

const worker = new MyWorker()
<script setup>
import FibWorker from './workers/fib_worker?worker'

const workerMap = {};
function clickHandler(boxId) {
    console.log('boxId', boxId);
    let worker = workerMap[boxId];
    if (!worker) {
        worker = new FibWorker();
        workerMap[boxId] = worker;
        worker.onmessage = (event) => {
            console.log('result', event.data);
            const boxEl = document.getElementById(boxId);
            const inputEl = boxEl.getElementsByTagName('input')[0];
            const number = inputEl.value;
            const spanEl = boxEl.getElementsByTagName('span')[0];
            spanEl.innerHTML`${number} fib result is ${event.data}`;
        }
    }

    const boxEl = document.getElementById(boxId);
    const inputEl = boxEl.getElementsByTagName('input')[0];
    const number = inputEl.value;
    worker.postMessage(number);
}

</script>

使用构造函数导入

        语法:

const worker = new Worker(new URL('./worker.js', import.meta.url))
import MyWorker from './worker?worker'

const worker = new MyWorker()
<script setup>

const workerMap = {};
function clickHandler(boxId) {
    console.log('boxId', boxId);
    let worker = workerMap[boxId];
    if (!worker) {
        worker = new Worker(new URL('./workers/fib_worker.js', import.meta.url))
        workerMap[boxId] = worker;
        worker.onmessage = (event) => {
            console.log('result', event.data);
            const boxEl = document.getElementById(boxId);
            const inputEl = boxEl.getElementsByTagName('input')[0];
            const number = inputEl.value;
            const spanEl = boxEl.getElementsByTagName('span')[0];
            spanEl.innerHTML`${number} fib result is ${event.data}`;
        }
    }

    const boxEl = document.getElementById(boxId);
    const inputEl = boxEl.getElementsByTagName('input')[0];
    const number = inputEl.value;
    worker.postMessage(number);
}

</script>

结尾

        通过以上内容,想必你对 WebWorker 所能解决的问题有了深刻认识,根据其所能解决的问题就可以在项目中得以应用啦。如果你对于以上内容以及其他前端技能存在困惑,欢迎在评论区留言或添加我的个人微信交流。

原文链接:https://juejin.cn/post/7340156047339192358 作者:前端技术探索

(0)
上一篇 2024年2月28日 上午10:00
下一篇 2024年2月28日 上午10:11

相关推荐

发表回复

登录后才能评论