浅谈Html5多线程开发之WebWorkers

什么是WebWorkers

WebWorkers是HTML5推出的一项新技术，用于JavaScript多线程开发。在WebWorkers API中，定义了两种类型的Worker：DedicatedWorker 和SharedWorker。其中，DedicatedWorker只能被一个页面使用，而SharedWorker可以被多个页面使用。

DedicatedWorker中的所有数据都是隔离的，而SharedWorker中的数据可以被多个浏览器窗口或iframe共享。使用SharedWorker，很适合当页面间需要共享状态时，如在线游戏等场景。

如何创建WebWorker

创建一个DedicatedWorker只需要一行代码：

let worker = new Worker("worker.js");

其中，"worker.js" 是Web Worker 的 JavaScript 文件路径。当主线程开始执行这行代码时，就会新建一个Worker线程并执行初始化操作。可以将主线程需要的部分功能移动到Worker线程，并通过postMessage API将消息发送给worker线程。

示例

示例一：简单的WebWorkers示例，主线程发送消息给子线程，子线程处理完后，发回一个消息，主线程打印出来。

主线程代码：

let worker = new Worker("worker.js");
worker.postMessage("Hello, worker!");  //向worker发送数据

worker.onmessage = function(event) {
   console.log("Received message from worker:" + event.data);
}

Worker线程代码（worker.js）：

onmessage = function(event) {
    console.log("Received message in worker: " + event.data);
    postMessage("Hello, main thread! I am worker.");
};

代码流程：

1. 主线程新建Worker线程并发送消息"Hello, worker!"。
2. 子线程收到消息并打印出来。
3. 子线程处理完之后，通过postMessage方法发送消息"Hello, main thread! I am worker."给主线程。
4. 主线程接收到来自Worker线程的消息，并打印出来。

示例二：WebWorkers在计算阶乘上的应用，主线程将计算任务交给子线程处理，子线程将结果返回。

主线程代码：

let worker = new Worker("worker.js");
worker.postMessage(10);

worker.onmessage = function(event) {
    console.log("factorial of 10 is " + event.data);
}

Worker线程代码（worker.js）：

onmessage = function(event) {
    let res = 1;
    for (let i = 2; i <= event.data; ++i) {
        res *= i;
    }
    postMessage(res);
}

代码流程：

1. 主线程新建Worker线程。
2. 主线程向Worker线程发送消息10，等待子线程处理并返回结果。
3. 子线程收到消息后，开始计算阶乘，并将结果通过postMessage返回给主线程。
4. 主线程接收到来自Worker线程的消息，并打印出来。

总结

WebWorkers作为一种HTML5多线程开发技术，可以极大地提升JavaScript运行效率。我们可以将一些耗时的操作移动到Worker线程中处理，不会对页面的响应造成影响，从而提升了程序的性能，保证了用户体验。