前言

Web Worker 是一种运行在主线程之外的 JavaScript 并行执行环境。通过 Web Worker，开发者可以将耗时的任务（如数据处理、文件解析等）从主线程中剥离，从而提高页面的响应速度和用户体验。

Web Worker API 方法详解

创建 Worker

使用Worker 构造函数创建一个新的 Worker 实例。

const worker = new Worker('worker.js');

参数是包含 Worker 脚本的文件路径。需要注意的是，文件必须与主线程在同源下运行。

发送消息到 Worker

主线程使用postMessage 方法向 Worker 发送消息。

worker.postMessage('Hello, Worker!');

发送的数据可以是任何可序列化的对象，例如字符串、数字、数组或 JSON 对象。

Worker 接收消息

Worker 使用onmessage 事件监听消息。

self.onmessage = function(event) {
    console.log('Message from Main Thread:', event.data);
};

event.data 包含主线程发送的数据。

Worker 向主线程发送消息

Worker 使用postMessage 方法将消息发送回主线程。

javascript
 代码解读
复制代码
self.postMessage('Hello, Main Thread!');

主线程接收 Worker 消息

主线程通过onmessage 事件接收 Worker 返回的数据。

worker.onmessage = function(event) {
    console.log('Message from Worker:', event.data);
};

捕获错误

主线程可以通过onerror 捕获 Worker 抛出的错误。

worker.onerror = function(error) {
    console.error('Worker error:', error.message);
};

在 Worker 内部可以通过throw 抛出错误：

throw new Error('Something went wrong');

终止 Worker

使用terminate 方法可以立即终止 Worker。

worker.terminate();

终止后，Worker 将停止执行所有任务。

Worker 内部全局对象

在 Worker 内部，全局对象是self，与主线程中的window 不同。常用的方法包括：

• self.close()：关闭当前 Worker。
• self.importScripts(...urls)：动态加载一个或多个脚本。

self.importScripts('script1.js', 'script2.js');

代码示例

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

主线程代码

const worker = new Worker('factorialWorker.js');

worker.postMessage(10); // 计算 10 的阶乘

worker.onmessage = function(event) {
    console.log('Factorial result:', event.data);
};

worker.onerror = function(error) {
    console.error('Worker error:', error.message);
};

Worker 脚本 (factorialWorker.js)

self.onmessage = function(event) {
    const number = event.data;
    const result = factorial(number);
    self.postMessage(result);
};

function factorial(n) {
    if (n === 0 || n === 1) return 1;
    return n * factorial(n - 1);
}

实际运用场景举例

场景 1：文件解析与处理

在处理大型文件（如 CSV、JSON 或图像）时，使用 Web Worker 可以将解析任务移至后台，从而避免主线程阻塞。

示例代码

主线程代码：

const fileWorker = new Worker('fileWorker.js');

// 模拟上传文件并传递给 Worker
const fileContent = 'name,age\nAlice,30\nBob,25';
fileWorker.postMessage(fileContent);

fileWorker.onmessage = function(event) {
    console.log('Parsed Data:', event.data);
};

Worker 脚本 (fileWorker.js)：

self.onmessage = function(event) {
    const csvData = event.data;
    const parsedData = parseCSV(csvData);
    self.postMessage(parsedData);
};

function parseCSV(data) {
    const rows = data.split('\n');
    const headers = rows[0].split(',');
    return rows.slice(1).map(row => {
        const values = row.split(',');
        return headers.reduce((obj, header, index) => {
            obj[header] = values[index];
            return obj;
        }, {});
    });
}

场景 2：复杂计算

例如，进行复杂的数学计算或图像处理时，Web Worker 可以显著提高性能。

示例代码

主线程代码：

const calcWorker = new Worker('matrixWorker.js');

// 模拟两个矩阵数据
const matrixA = [[1, 2], [3, 4]];
const matrixB = [[5, 6], [7, 8]];

calcWorker.postMessage({ matrixA, matrixB });

calcWorker.onmessage = function(event) {
    console.log('Matrix Multiplication Result:', event.data);
};

Worker 脚本 (matrixWorker.js)：

self.onmessage = function(event) {
    const { matrixA, matrixB } = event.data;
    const result = multiplyMatrices(matrixA, matrixB);
    self.postMessage(result);
};

function multiplyMatrices(a, b) {
    const rowsA = a.length, colsA = a[0].length;
    const rowsB = b.length, colsB = b[0].length;
    if (colsA !== rowsB) throw new Error('Matrix dimensions do not match');

    const result = Array.from({ length: rowsA }, () => Array(colsB).fill(0));
    for (let i = 0; i < rowsA; i++) {
        for (let j = 0; j < colsB; j++) {
            for (let k = 0; k < colsA; k++) {
                result[i][j] += a[i][k] * b[k][j];
            }
        }
    }
    return result;
}

总结

Web Worker 是一种强大的工具，可以显著提升 Web 应用的性能和响应速度。通过合理使用 Worker，将耗时任务从主线程中剥离，开发者可以构建更流畅、更高效的用户体验。在实际开发中，需要权衡 Worker 的开销和收益，确保性能优化的同时控制资源消耗。