web worker简单使用教程

发表于 | 阅读次数:

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。——《Web Worker 使用教程》
然后一些worker使用限制在该文章中也有提到，本文主要是通过一个简单的例子来讲讲web worker的使用。

主线程

在主线程中创建一个worker线程，var worker = new Worker('./worker-example.js');,通过主线程将数据传给worker；

1
2
3
4
worker.postMessage({
    description: '发送请求',
    url: './data/1.json'
});

主线程通过onmessage函数监听，接收子进程返回的数据。

1
2
3
4
5
6
7
8
9
10
worker.onmessage = function (event) {
    console.log('Received message ' + event.data);
    var codeEle = document.getElementsByTagName('code')[0];
    if(Object.getOwnPropertyNames(event.data).length) {
        codeEle.innerHTML = event.data;
    } else {
        codeEle.innerHTML = '未收到数据';
    }
    worker.terminate(); //通过主进程关闭worker
}

worker线程

worker通过message函数监听主线程发送过来的数据。

1
2
3
4
5
6
7
8
9
10
self.addEventListener('message', function (e) {
  var data = e.data;
  var url = data.url;
  request({
    url: url
  }).then(data => {
    self.postMessage('原始数据:\n ' + data);
    self.close();
  });
}, false);

这样一个简单的web worker例子就完成了。

例子地址：https://github.com/LCINA/-web-worker-