web worker实现一个简单的异步编程

liyfn

于 2022-11-27 18:36:44 发布

阅读量465

点赞数 4

分类专栏： JS进阶之路文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_42825643/article/details/128067348

版权

JS进阶之路专栏收录该内容

8 篇文章 1 订阅

订阅专栏

文章目录

一、前言

假设一个场景，你的后端是个小白，你需要自己实现一个十万数量级的数据处理(当然这是不可能的)，你怎么办？
我们今天就来聊一个解决办法：js的异步编程web worker。

二、一个案例

我们先来实现一个斐波那契数列作为对照。为了增加程序执行时间我们用递归来实现，并且不做缓存。

<!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>
    <input type="text" name="" id="">
    <button onclick="getFeibonq()">开始计算</button>
    <script>
        function getFeibonq(){
            function fb(x){
                if(x == 1) return 1
                if(x == 2) return 1
                if(x == 3) return 2
                return fb(x-1) + fb(x-2)
            }       
            let value = document.querySelector('input').value || 1
            let res = fb(value)
            console.log(res)
        }
    </script>
</body>
</html>

在这里插入图片描述
可以看到，在计算第45个数的时候，花费了22s，这期间页面是假死状态，无法进行任何操作。如果是实际应用，可以想想这个情况的用户体验会是多么的糟糕。

三、web worker解决

我们试一试用web worker解决。
因为chrom浏览器本地打开文件时默认屏蔽web worker，所以我们利用vue创建项目，套个vue的壳：在public中index.html中编写代码

// 如下
 	<input type="text" />
    <button onclick="getFeibonq()">开始计算</button>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <script>
      const worker = new Worker("./worker.js");
      function getFeibonq() {
        let val = document.querySelector("input").value;
        // 将输入值传给worker
        worker.postMessage(val);
        // 监听worker返回值
        worker.addEventListener("message", (msg) => console.log(msg.data));
      }
    </script>

同级目录下worker.js中代码：

function fb(x) {
  if (x == 1) return 1;
  if (x == 2) return 1;
  if (x == 3) return 2;
  return fb(x - 1) + fb(x - 2);
}
// 监听主线程传过来的数据
addEventListener("message", (message) => {
  postMessage(fb(message.data));
});

再看效果：
在这里插入图片描述
还是第45个数，可以计算出来（计算时间不会减短），而且计算期间，页面正常响应，不会卡死。

四、执行原理

我们来看下上述代码的执行原理：

1.const worker = new Worker(“./worker.js”);引入同级worker文件，同时，他也是一个单独的线程。
2. worker.postMessage(val);调用worker的方法将页面中获取到的数据，发送给worker线程。
3.addEventListener(“message”, (message) => {});worker线程中监听到数据发送后，开始执行回调
4.postMessage(fb(message.data));通过postMessage将计算结果返回主线程；
5. worker.addEventListener(“message”, (msg) => console.log(msg.data));主线程监听worker返回的数据

简单来说，就是1.主线程获取数据（因为worker线程无法获取dom，数据只能接收主线程传过来的），2.worker线程计算数据，再3.通过线程通信交换结果。