web Worker基本使用

Posted 2021-02-02 小马不黑

web worker 使用

web worker 是现代浏览器具有的可以处理密集型任务非常便利的解决方案，众所周知，javascript是单线程的（一个JavaScript引擎实例只能占用一个线程，线程由宿主环境提供而非JavaScript引擎，引擎只是占用了一个线程来执行任务），但是如果我们可以使用一个新的JavaScript引擎实例的话就可以在新的线程上去处理一些密集型、容易堵塞UI的任务。当前页面的JavaScript线程去处理有关UI与交互方面的任务从而提高页面流畅度。

如何使用 (Web) Worker

worker 是啥？可以理解为一个新的 JavaScript 引擎实例，既然是实例的话... 那不就是一个对象了吗，new 一个就好了呗【滑稽】。

const worker = new Worker(url);
// url 为 Worker 实例中运行的 js 的路径

实现当前页面与 worker 的通讯
由于 worker 与当面页面中的 JavaScript引擎 并非同一线程，并不能共享数据，数据之间需要通过 postMessage 来传递。就和当前页面中 iframe 使用很相似，不同的是 worker 中只运行 js。

// 页面中运行的 js
const worker = new Worker(url);

worker.addEventLister('message', function(evt) {
    console.log(evt.data);
})

worker.postMessage('from page.');

// worker.js
addEventLister('message', function(evt) {
    console.log(evt.data);
});

postMessage('from worker.');