避免页面卡顿：一文掌握 Web Workers 使用指南

背景

浏览器中的 JavaScript 语言采用单线程模型，这意味着所有任务只能在一个线程上完成，一次只能执行一个任务。在前面的任务完成之前，后续任务无法开始。单线程模型的问题不仅是多核利用不足，还包括长时间任务阻塞事件循环导致界面卡顿。建议补充事件循环机制对UI响应的影响。。

什么是Web Workers？

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

Worker线程的全局对象为DedicatedWorkerGlobalScope（专用Worker）或SharedWorkerGlobalScope（共享Worker），而非主线程的window对象。

Web Workers的工作原理

Web Workers运行在一个独立于主线程的环境中，没有访问DOM的权限。它们通过postMessage和onmessage与主线程进行通信。主线程可以创建一个Worker对象，并将脚本文件的URL作为参数传递给它。Worker线程加载并执行该脚本，并可以向主线程发送消息。

Web Workers的优缺点

优点

非阻塞性: Web Workers运行在独立线程中，不会阻塞主线程，避免了用户界面卡顿。
多线程计算: 可以利用多核CPU的优势，进行并行计算，提高性能。
后台任务处理: 适用于处理大型数据集、复杂计算、长时间运行的任务等。

缺点

无法访问DOM: Worker线程不能直接操作DOM，因此不能直接更新用户界面。
额外的资源开销: 每个Worker都有独立的执行环境，会占用额外的系统资源。
通信开销: 主线程和Worker之间的通信需要序列化和反序列化数据，可能会有性能开销。
调试困难：Worker线程的console输出在浏览器开发者工具中需单独查看。
生命周期管理 ：主线程关闭时Worker自动终止，需显式调用worker.terminate()避免资源泄漏

使用 Web Worker 时需要注意以下几点：

同源限制

分配给 Worker 线程运行的脚本文件必须与主线程的脚本文件同源。

特殊例子

javascript 复制代码

 //通过`Blob URL`或`data URL`创建Worker时，若内容由主线程动态生成，则不受同源限制：
const code = 'onmessage = (e) => postMessage(e.data * 2);';
const blob = new Blob([code], {type: 'application/javascript'});
const worker = new Worker(URL.createObjectURL(blob));

DOM 限制

Worker 线程的全局对象与主线程不同，无法访问主线程所在网页的 DOM 对象，也无法使用 document、window 和 parent 对象。但 Worker 线程可以访问 navigator 和 location 对象。
通信联系

Worker 线程与主线程不在同一个上下文环境中，无法直接通信，只能通过消息传递来交流。
脚本限制

Worker 线程不能执行 alert() 和 confirm() 方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
文件限制

Worker 线程无法访问本地文件系统（file://），因此无法读取本地文件，所加载的脚本必须来自网络。

使用Web Workers的基本步骤

创建Worker: 在主线程中创建Worker对象，指定Worker脚本的路径。
通信 : 使用postMessage发送消息，onmessage接收消息。
终止Worker : 可以使用terminate方法终止Worker。

代码示例

以下是一个简单的Web Workers示例，演示如何使用Worker计算大数阶乘。

主线程代码

javascript 复制代码

// 创建Worker对象，指定Worker脚本路径
const worker = new Worker('worker.js');

// 监听Worker的消息
worker.onmessage = function(event) {
    console.log('从Worker接收到的消息:', event.data); // 打印Worker发送的结果
};

// 发送消息给Worker，让它计算10的阶乘
worker.postMessage(10);

Worker线程代码（`worker.js`）

javascript 复制代码

// 监听主线程的消息
onmessage = function(event) {
    const number = event.data; // 获取主线程发送的数字
    const result = factorial(number); // 计算阶乘
    postMessage(result); // 将结果发送回主线程
};

// 计算阶乘的函数
function factorial(n) {
    if (n <= 1) {
        return 1; // 1的阶乘为1
    }
    return n * factorial(n - 1); // 递归计算阶乘
}

详细解析

主线程中的操作

创建Worker : 使用new Worker()创建一个新的Worker实例，并指定Worker脚本的路径。这个脚本将在一个独立的线程中运行。
消息监听 : 主线程使用worker.onmessage监听Worker线程发送的消息。每当Worker线程调用postMessage时，这个事件处理函数就会被触发，并接收到消息数据。
发送消息 : 使用worker.postMessage()方法向Worker线程发送消息。在这个例子中，主线程发送了一个数字10，表示我们希望计算10的阶乘。

Worker线程中的操作

消息监听 : Worker线程使用onmessage事件处理函数接收主线程发送的消息。接收到消息后，获取数据并进行相应的处理。
计算逻辑 : Worker线程中定义了一个递归函数factorial，用于计算传入数字的阶乘。
发送结果 : 使用postMessage方法将计算结果发送回主线程。

结论

Web Workers是一种强大的工具，适用于CPU密集型任务（如数学计算、图像处理）。通过将这些任务移至后台线程，Web Workers可以显著提升Web应用的响应速度和用户体验，但需避免过度创建Worker导致内存压力。对于简单任务，优先考虑主线程异步方案（如setTimeout、requestIdleCallback）。尽管它们有一些限制，如无法访问DOM，但在合适的场景中，Web Workers依然是不可或缺的技术。

避免页面卡顿：一文掌握 Web Workers 使用指南

背景

什么是Web Workers？

Web Workers的工作原理

Web Workers的优缺点

使用 Web Worker 时需要注意以下几点：

使用Web Workers的基本步骤

代码示例

主线程代码

Worker线程代码（worker.js）

详细解析

主线程中的操作

Worker线程中的操作

结论

Worker线程代码（`worker.js`）