web Worker基本使用

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。

// 页面中运行的 jsconst worker = new Worker(url);worker.addEventLister('message', function(evt) { console.log(evt.data);})worker.postMessage('from page.');
// worker.jsaddEventLister('message', function(evt) { console.log(evt.data);});postMessage('from worker.');

相关文章