Web Worker：一种在与当前主（窗口）线程不同的线程中在后台运行脚本的方法。

1. Web Workers 与使用 event_loop 的异步
2. 网络工作者简介
3. 如何创建网络工作者
4. 例如网络工作者
5. Web Workers 的限制
6. Web Workers 中的异步操作

1. Web Workers 与使用事件循环的异步操作

JavaScript通常通过将任务放入相应的队列（宏任务队列、微任务队列）来处理异步操作，事件循环不断检查这些队列，并在任务准备好执行时将其推送到调用堆栈中。这种方法确保非阻塞执行，但仍然在单个线程上运行所有内容。

Web Workers 另一方面，允许脚本在完全独立的线程中运行，具有自己的调用堆栈、异步队列和事件循环。这种分离可以防止主线程被繁重的计算或长时间运行的任务阻塞，因为工作线程独立运行。

2. Web Workers 简介

Web Worker 在与主窗口上下文不同的上下文中执行脚本，从而实现 Web 应用程序中的并行性。 Web Worker API 提供了几种类型的工作人员：

• Dedicated Workers：由单个脚本使用，非常适合从主线程卸载任务。
• 共享工作线程：可由在不同上下文（例如，不同窗口或 iframe）中运行的多个脚本访问。
• Service Workers：作为 Web 应用程序、浏览器和网络之间的代理服务器运行，提供离线支持和缓存等功能。

本文重点介绍专用工作人员，这是最容易实现且最常用的。

3. 如何创建 Web Worker

要创建Web Worker，您可以使用以下关键方法：

• new Worker()：创建新worker的构造函数。
• postMessage()：从主线程向工作线程发送消息，反之亦然。
• onmessage：设置用于处理worker收到的消息的回调函数。
• terminate()：立即停止工作线程。

4. 简单示例

让我们创建一个工作程序来从 API 获取数据，特别是从 Dog CEO API 获取狗图像。

4.1 工人代码

这里是worker脚本的实现。请注意，在worker内部，self用于引用全局上下文：

if (window.Worker) {
    const worker = new Worker("/src/worker.js");
        worker.postMessage({ 
            operation: "get_dog_imgs",
            url: "https://dog.ceo/api/breeds/image/random", 
            count: 5   //number of photos
        });
        worker.onmessage = (e) => {
        console.log(e.data);
        if (e && e.data) {
            setdata((old) => [...old, e.data]); // update react state
            showCallStack(); // function to show the callstack 
        }
    };
    worker.onerror = (e) => {
        console.log(e);
    };
}

在此代码中，worker 侦听消息 (onmessage) 并根据计数指定多次从给定 URL 获取数据。

这是工作者内部的调用堆栈：

4.2 客户端代码

主线程像这样使用worker：

self.onmessage = (event) => {
    const data = event.data;
    if (data && data.url && data.count) {
        fetchFromUrls(data.url, data.count);
    }
}
// fetch single data 
const fetchdata = async (url) => {
    const res = await self.fetch(url);
    return await res.json();
};

const fetchFromUrls = async (url, count) => {
    showCallStack(); // showing the callstack of the worker 
    for (const i of new Array(count).fill(0)) {
        let data = await fetchdata(url);
        if (data && data.message) {
            self.postMessage({ type: "img", data: data.message });
        }
    }
};

这段代码演示了如何向worker发送消息并在主线程中接收获取的数据。

完整代码请访问代码

5. Web Workers 的局限性

虽然 Web Worker 在与主窗口线程不同的线程中运行，但它们具有一定的限制：

• 无法访问 DOM：Workers 无法直接操作 DOM。更新 UI 需要与主线程通信。
• 资源消耗：过度使用 Web Worker 可能会导致内存使用率过高，因为每个 Worker 都需要额外的资源才能独立运行。