最近在看 useWorker 库的时候发现该 hook 只需传入函数即可运行，虽然说 worker 不经常使用，但是就酱紫直接用不需要一个 js 文件承接？

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

useWorker Usage

import React from 'react';
import { useWorker } from '@koale/useworker';

const numbers = [...Array(5000000)].map((e) => ~~(Math.random() * 1000000));
const sortNumbers = (nums) => nums.sort();

const Example = () => {
  const [sortWorker] = useWorker(sortNumbers);

  const runSort = async () => {
    const result = await sortWorker(numbers); // non-blocking UI
    console.log(result);
  };

  return (
    <button type="button" onClick={runSort}>
      Run Sort
    </button>
  );
};

源码解析与最简实现

Demo

请打开控制台查看差异与结果～

最简实现

提取了下 useWorker 的大致逻辑，简化实现了下～主要看下核心逻辑，”凭空”创建 worker

// create worker
const createWWorker = (fn) => {
  console.log('worker run');
  let promise = {};
  const jobRunner = (options) => (e) => {
    const [userFuncArgs] = e.data;
    return Promise.resolve(options.fn(...userFuncArgs))
      .then((result) => {
        postMessage(['SUCCESS', result]);
      })
      .catch((error) => {
        postMessage(['ERROR', error]);
      });
  };

  const blobCode = `
    onmessage=(${jobRunner})({
      fn: (${fn}),
    })
  `;

  const blob = new Blob([blobCode], { type: 'text/javascript' });

  const jsUrl = URL.createObjectURL(blob);

  const worker = new Worker(jsUrl);

  worker.addEventListener('message', (e) => {
    const [status, result] = e.data;

    switch (status) {
      case 'SUCCESS': {
        promise.resolve(result);
        break;
      }
      default:
        promise.reject(result);
        break;
    }

    if (jsUrl) {
      worker.terminate();
      URL.revokeObjectURL(jsUrl);
      promise = {};
    }
  });

  const runWorker = (...restArgs) =>
    new Promise((resolve, reject) => {
      promise.resolve = resolve;
      promise.reject = reject;
      worker.postMessage([restArgs]);
    });

  return runWorker;
};

// usage
const worker = createWWorker(bubbleSort);
const result = await worker(bigNumbers);

看看如何通过代码生成 url 传给 worker

const blobCode = `
    onmessage=(${jobRunner})({
      fn: (${fn}),
    })
  `;

const blob = new Blob([blobCode], { type: 'text/javascript' });

const jsUrl = URL.createObjectURL(blob);

const worker = new Worker(jsUrl);

第一段看起来可能比较疑惑，函数 toString 后放入到 script 里也可以运行？试试就逝世～复制下面代码到控制台。

好吧，script type=”text/javascript“ 忘记这个了，函数 toString 后，比如闭包啊 this 指向等，可能都会有点问题，建议为纯函数～

const script = document.createElement('script');
const script = document.createElement('script');
script.innerText = `const test = 333; document.addEventListener('click', () => {
  console.log(test);
  })`;
document.body.appendChild(script);

通过生成 Blob 创建资源 Url

第一段生成 Blob 流，再通过流来创建 URL 当作 worker 的文件，思路清晰我是菜 B ～还得学～

const blob = new Blob([blobCode], { type: 'text/javascript' });

const jsUrl = URL.createObjectURL(blob);

可能接触不多，往往会弄混或遗忘这些方法～简单描述下～

Web Socket

Web Worker

由于 JavaScript 为单线程，在计算一些密集型或高延性的任务时，会影响到整个页面的运行，WebWorker 应声而出。

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。
Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。
引用自阮一峰老师的文章《Web Worker 使用教程》

Service Worker