前端多线程之Worker

奇喑

已于 2024-08-27 12:57:56 修改

阅读量4.1k

点赞数 1

分类专栏：前端文章标签： javascript

于 2021-09-30 16:26:32 首次发布

本文链接：https://blog.csdn.net/asd0356/article/details/120567248

版权

前端专栏收录该内容

70 篇文章 8 订阅

订阅专栏

本文介绍了Web Worker的使用，通过一个简单的中国象棋AI运算的场景，展示了如何在主线程与Worker线程间传递数据，进行计算并返回结果，以此提升前端的计算性能，避免页面卡顿，提供更好的用户体验。

摘要由CSDN通过智能技术生成

前言

首先，我们都知道前端js所在的运行环境是一个单线程环境，即同一时刻只能执行一段代码，无法实现并行处理的操作，比如异步编程。但是这并不绝对，Worker 可以使得我们创建另外一个后台线程为我们服务，相信大多数朋友可能对于Worker接口都比较陌生，大家可以先去MDN官网查看文档：Worker文档

Worker的使用流程

主线程创建Worker对象
给Worker对象绑定message监听事件，监听新线程传递的信息
给新线程的self对象绑定message监听事件，监听主线程传递的信息
两线程之间通过postMessageAPI传递数据

self是当前window对象的一个引用，详见文档：self文档
postMessage可以进行不同页面脚本间的通信，详见文档：postMessage文档

简单的demo

Talk is cheap,show you my demo!
这个demo我们需要准备三个文件：demo.html，worker.js以及self.js。
这个demo模拟的功能是主线程每次会给新线程传递一个0-9的随机数，然后新线程会在一秒后进行传入的数据进行平方操作并返回给主线程。
worker.js是配置主线程相关的信息：（创建新线程以及为Worker对象添加监听事件）

const worker = new Worker('self.js');
worker.onmessage = (e) => {
    const data = e.data
    console.log('Received self message:' + data);
}
function work() {
    worker.postMessage(Math.floor(Math.random() * 10));
}

window.start = work;

self.js是配置新线程相关的信息：（给self对象添加监听事件）

self.onmessage = (e) => {
    const data = e.data;
    console.log('worker data:' + data);
    timedCount(data);
}

function timedCount(data) {
    setTimeout(() => {
        console.log('计算一秒')
        self.postMessage(data ** 2);
    }, 1000);
}

至于demo.html，是因为此程序只能在浏览器中允许并且需要启动Live Serve：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    demo test
    <script src="./worker.js"></script>
</body>
</html>

允许此demo，再控制台中输入start()，即可看到如下结果：
在这里插入图片描述

demo的使用场景

主线程给子线程传递数据，子线程加工数据，经过一段时间后将结果返回给主线程，其实这种设计思想可以运用在前端ai设计上，比如中国象棋。其实在更一般的情况下，这类计算结果是通过后台接口进行返回，这也是就我们最常用的异步回调的方式，但是如果仅仅使用前端进行实现，那么我们就有必要再开启一个新的线程为我们进行计算（模拟后端接口）。如果我们依旧使用主线程进行计算，那么很有可能会产生页面卡顿的情况，特别是在计算时间过久的情况下，会给用户带来非常差的使用体验。

结语

这篇博客主要简要的讲述了Worker的使用方式并且给出一个demo让大家更直观的进行理解。对于一些前端需要使用多线程的场景，我们都可以使用Worker进行解决（比如面试题：实现setTimeout）。同样，如果大家有任何疑问，欢迎评论区留言或者私信我，如果本篇文章有讲述不对之处也欢迎评论区指正，下期再会。