🚀面试官：Web Worker知道吧？怎么动态的创建Web Worker呢🚀

可乐鸡翅kele
3 阅读7分钟

前言

浏览器是一个多进程多线程的架构，以 Chrome 为例，每一个 tab 页都是一个单独的渲染进程。在这个渲染进程下，有 JS 执行线程和渲染线程。

JS 执行线程与渲染线程是互斥的，这就导致了我们在执行一些长任务的时候，会阻塞渲染线程，具体的表现可能有：

  1. 动画卡顿
  2. 点击按钮/输入框输入没反应等等

在 HTML5 中，浏览器提出了 Web Worker 这种技术，它允许在主线程之外运行脚本，这样就可以在后台执行一些耗时的任务，而不会阻塞 JS 执行线程，从而提高了 Web 应用的性能和响应性。

web worker简介

Web Worker 的一些主要用途和优点包括：

  1. 并行计算： Web Worker 提供了一个在后台线程中执行 JavaScript 代码的环境，可以在这个环境中进行并行计算，提高页面性能和响应速度。
  2. 执行耗时任务：对于需要较长时间来完成的任务，比如大量数据处理、复杂算法运算、图片处理等，可以将这些任务放在 Web Worker 中执行，避免阻塞渲染线程。
  3. 提高用户体验：通过将一些耗时的操作放在 Web Worker 中执行，可以提高页面的响应速度和用户体验，使用户感受到页面更加流畅。
  4. 并发处理：使用多个 Web Worker 实例可以实现更高级的并发处理，从而更有效地利用多核 CPU。

尽管 Web Worker 提供了很多优点，但也需要注意以下几点：

  • 无法访问 DOM：Web Worker 运行在独立的线程中，无法直接访问 DOM 和一些浏览器 API，因此主要用于处理纯粹的计算任务和网络请求。
  • 通信开销：由于 Web Worker 与主线程是隔离的，它们之间的通信需要通过消息传递，因此可能会存在一定的通信开销。
  • 内存消耗：每个 Web Worker 都会占用一定的内存，如果过多地创建 Web Worker，可能会导致内存消耗过大。

Vite+React 使用 demo

下面以 Vite+React 为例，介绍一下如何使用 Web Worker ，并展示 Web Worker 不阻塞渲染的特性。

首先我们来做两件事情，第一件事情是写一个简单的动画：

@keyframes ball-animation {
  0% {
    top: 200px;
  }
  50% {
    top: 100px;
  }
  100% {
    top: 200px;
  }
}
.ball {
  width: 100px;
  height: 100px;
  top: 200px;
  left: 200px;
  background-color: red;
  position: absolute;
  border-radius: 50%;
  animation: ball-animation infinite 1s;
}

Kapture 2024-04-15 at 23.14.36.gif

可以看到是一个简单的小球跳动的动画，然后我们在组件挂载 3S 之后，执行一段 JS 长任务，这里以从 0 累计到 4000000000 为例：

  useEffect(() => {
    setTimeout(() => {
      console.log("长任务开始");
      console.time("calculate");
      let count = 0;
      for (let i = 0; i < 4000000000; i++) {
        count++;
      }
      console.log("长任务结束");
      console.timeEnd("calculate");
    }, 3000);
  }, []);

Kapture 2024-04-15 at 23.13.42.gif

可以看到小球在长任务开始之后动画就停止了，整个页面也是处于一个不可交互的状态。这就是我们的JS执行线程阻塞了渲染线程。

然后我们尝试使用 worker 去进行这个计算，看看是什么效果。

首先在 public 目录下新建一个 calculate.worker.js 文件，填入以下的内容：

self.onmessage = function (e) {
  const data = e.data;
  console.log("长任务开始");
  console.time("calculate");
  let count = 0;
  for (let i = 0; i < data; i++) {
    count++;
  }
  console.log("长任务结束");
  console.timeEnd("calculate");
  self.postMessage("处理完成");
};

然后我们在主线程中来调用这个 worker ：

  useEffect(() => {
    setTimeout(() => {
      const worker = new Worker("/calculate.worker.js");
      worker.postMessage(4000000000);
      worker.onmessage = (e) => {
        console.log("收到worker的消息", e.data);
      };
    }, 1000);
  }, []);

然后来看一下执行效果：

Kapture 2024-04-17 at 21.50.30.gif

可以看到，已经不再阻塞页面的渲染，整个过程十分丝滑。

Worker引入外部函数

那在我们实际的开发过程中，经常是需要引入一些外部第三方库去搭配使用的。在 worker 中，引入第三方库需要使用 importScripts 这个方法。这样的话就需要我们打成一个 umd 的包来引入。

使用示例如下：

importScripts(
  "https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.core.min.js"
);
self.onmessage = function (e) {
  const data = e.data;
  const res = self._.max(data)
  self.postMessage(res)
};

这里先引入 lodash 的 cdn 包，然后用来计算最大值。

主线程发送数据如下：

 const worker = new Worker("/calculate.worker.js");
    worker.postMessage([1, 2, 3, 4, 5]);
    worker.onmessage = (e) => {
      console.log("收到worker的消息", e.data);
};

动态封装

下面我们来封装一个 createWorker 方法，可以动态创建 worker 并执行调用。

完整代码如下，先看代码，再来解释：

export const createWorker = ({ executor, params }) => {
  return new Promise((resolve, reject) => {
    const funcStr = executor.toString();
    const blob = new Blob([
      `onmessage = function(e) {
  const func = eval('(' + e.data.funcStr + ')');
  function convertStringsToFunctions(obj) {
    function dfs(obj) {
      for (const key in obj) {
        if (typeof obj[key] === 'string') {
          try {
            obj[key] = eval('(' + obj[key] + ')');
          } catch (error) {
          }
        } else if (typeof obj[key] === 'object' && obj[key] !== null) {
          dfs(obj[key]);
        }
      }
    }
    dfs(obj);
    return obj;
  }
  const data = convertStringsToFunctions(e.data.funcData);
  Promise.resolve(func(data)).then(res=>{
    postMessage({
      type: 'success',
      data: res
    })
  }).catch(err=>{
    postMessage({
      type: 'error',
      data: err
    })
  })
}`,
    ]);

    const url = URL.createObjectURL(blob);
    const worker = new Worker(url);

    worker.onmessage = function (e) {
      worker.terminate();
      URL.revokeObjectURL(url);
      console.log(e.data.type);
      if (e.data.type === "success") {
        resolve(e.data.data);
      } else {
        reject(e.data.data);
      }
    };

    function convertFunctionsToStrings(params) {
      function dfs(obj) {
        for (const key in obj) {
          if (typeof obj[key] === "function") {
            obj[key] = obj[key].toString(); // 将函数转换为字符串
          } else if (typeof obj[key] === "object" && obj[key] !== null) {
            dfs(obj[key]);
          }
        }
      }
      dfs(params);
      return params;
    }
    const data = convertFunctionsToStrings(cloneDeep(params));
    worker.postMessage({ funcStr, funcData: data });
  });
};
  1. createWorker 接收两个参数，一个是执行函数，一个是执行函数所需的参数
  2. 我们需要把执行函数放到 worker 执行，使用 postMessage 传递， postMessage 是不支持传输函数的，所以需要把函数转成字符串。在 worker 接收到之后再使用 eval 来调用。由于可能会有深层次的对象函数嵌套，所以这里需要递归。
  3. 同理， params 中的函数也需要转成字符串再交给 worker 。
  4. 为了兼容异步函数，这里统一把执行函数都先转成一个 Promise
  5. 执行函数执行完毕后，通知主线程并返回结果

使用示例

使用示例如下：

import { useEffect, useState } from "react";
import * as lodash from "lodash";
import { createWorker } from "./worker";
function App() {
  useEffect(() => {
    const run = async () => {
      const res = await createWorker({
        executor: ({ isEmpty, list }) => {
          return new Promise((resolve) => {
            const res = list.map(isEmpty);
            resolve(res);
          });
        },
        params: {
          isEmpty: (value) => !!value,
          list: [0, undefined, null, ""],
        },
      });
      console.log("res", res);
    };
    run();
  }, []);
}

export default App;

image.png

并发控制

上面已经提到过，如果 worker 创建太多也会导致资源占用太多，可能会消耗大量的内存。

所以这里需要做一个并发的控制，可以使用 window.navigator.hardwareConcurrency 来获取 cpu 的数量。

可以实现下面的一个 DynamicWorker 类，同样的先把代码贴出来，再来解释。

export class DynamicWorker {
  static getInstance(params = {}) {
    const { newInstance = false } = params;
    if (newInstance) {
      return new DynamicWorker();
    }
    if (!DynamicWorker.instance) {
      DynamicWorker.instance = new DynamicWorker();
    }

    return DynamicWorker.instance;
  }
  core = window.navigator.hardwareConcurrency || 4; // 核心数量
  runningCount = 0;
  queue = [];
  createWorker = ({ executor, params }) => {
    const createTask = () => {
      return new Promise((resolve, reject) => {
        const funcStr = executor.toString();
        const blob = new Blob([
          `onmessage = function(e) {
      const func = eval('(' + e.data.funcStr + ')');
      function convertStringsToFunctions(obj) {
        function dfs(obj) {
          for (const key in obj) {
            if (typeof obj[key] === 'string') {
              try {
                obj[key] = eval('(' + obj[key] + ')');
              } catch (error) {
              }
            } else if (typeof obj[key] === 'object' && obj[key] !== null) {
              dfs(obj[key]);
            }
          }
        }
        dfs(obj);
        return obj;
      }
      const data = convertStringsToFunctions(e.data.funcData);
      Promise.resolve(func(data)).then(res=>{
        postMessage({
          type: 'success',
          data: res
        })
      }).catch(err=>{
        postMessage({
          type: 'error',
          data: err
        })
      })
    }`,
        ]);

        const url = URL.createObjectURL(blob);
        const worker = new Worker(url);

        worker.onmessage = function (e) {
          worker.terminate();
          URL.revokeObjectURL(url);
          if (e.data.type === "success") {
            resolve(e.data.data);
          } else {
            reject(e.data.data);
          }
        };

        function convertFunctionsToStrings(params) {
          function dfs(obj) {
            for (const key in obj) {
              if (typeof obj[key] === "function") {
                obj[key] = obj[key].toString(); // 将函数转换为字符串
              } else if (typeof obj[key] === "object" && obj[key] !== null) {
                dfs(obj[key]);
              }
            }
          }
          dfs(params);
          return params;
        }
        const data = convertFunctionsToStrings(cloneDeep(params));
        worker.postMessage({ funcStr, funcData: data });
      });
    };

    if (this.runningCount < this.core) {
      this.runningCount = this.runningCount + 1;
      return createTask();
    } else {
      return new Promise((resolve, reject) => {
        this.queue.push(() => {
          this.runningCount = this.runningCount + 1;
          createTask().then(resolve).catch(reject);
        });
      });
    }
  };
  next = () => {
    if (this.queue.length > 0) {
      const task = this.queue.shift();
      task();
    }
  };
}
  1. DynamicWorker 默认是单例模式，当然也可以创建多实例。
  2. 任务池不超过核心数量
  3. 如果当前任务池已满，则把任务推到队列里面，等待空闲时候再执行。

使用起来的方式也大同小异：

const run = async () => {
  const dynamicWorker = DynamicWorker.getInstance();
  const res = await dynamicWorker.createWorker({
    executor: ({ isEmpty, list }) => {
      return new Promise((resolve) => {
        const res = list.map(isEmpty);
        resolve(res);
      });
    },
    params: {
      isEmpty: (value) => !!value,
      list: [0, undefined, null, ""],
    },
  });
  console.log("res", res);
};

最后

以上就是本文的全部内容，如果你觉得有意思的话，点点关注点点赞吧～

avatar
文章
阅读
粉丝