Web Worker 概述

使用场景

js采用的是单线程模型，所有任务只能在一个线程上完成，但是计算机目前大部分都是多核cpu的，通过Web Worker为js创造多线程环境。

主线程创建Worker线程，在主线程运行的同时，Worder线程在后台运行，不会影响主线程，当计算出结果后再将其返回给主线程。

可以将一些计算密集型或者高延迟的任务交给Worker线程，主线程主要来负责UI交互，使页面更流畅。

注意

Worker线程新建成功后，会始终运行，需要主动关闭。

主要是利于随时响应主进程的通信。

1. 同源限制

Worker线程运行的文件必须和主线程的文件同源。

2. DOM限制

Worker线程的全局对象与主线程不一样，不能获取DOM对象、document、window、parent。

可以获取 navigator和location。

3. 通信联系

不能直接通信，必须通过消息完成。

4. 脚本限制

Worker线程不能执行alert()和confirm()，但是可以执行console，也可以使用XMLHttpRequest对象发出ajax。

5. 文件限制

Worker线程不能读取本地文件，必须来自网络，本地的可以通过Blob和URL.createObjectURL()实现。

Web Worder使用

初步使用

主线程

• 创建Worker线程和通信

/**
* 创建一个Worker线程
* worker.js必须来自网络，如果下载失败不会有任何提示
*/
const worker = new Worker('worker.js');

/**
* 主线程向Worder线程发送数据
* 也可以传二进制数据
*/
worker.postMessage('test1');
worker.postMessage({
    method: 'send',
    arg: ['test2']
});

/**
* 主线程接收Worler线程发送数据
* 指定一个回调函数监听
*/

worker.onmessage = (event) => {
    // event.data Worker线程发送到主线程的数据
    const data = event.data;
    // 告诉Worker线程可以关闭的信息，在Worker中处理关闭
    worker.postMessage('done');
    // 也可以主线程关闭
    worker.terminate();
}

• 主线程可以监听Worker是否出错，如果出错会触发主线程的error事件

worker.addEventListener('error', (e) => {
    console.log([
    'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
  ].join(''));
});
// 或
worker.onerror((e) => {
    console.log([
    'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
  ].join(''));
});

• 关闭Worker

// 主线程
worker.terminate();
// Worker线程
self.close();

Worker线程

• Worker线程内部 self 和 this代表子线程的自身

• Worker线程内部需要有一个监听函数，监听message事件。

三种写法

// 1
self.addEventListener('message', (e) => {
    // 接收到的数据
    const data = e.data;
}, false);
// 2
this.addEventListener('message', (e) => {
    // 接收到的数据
    const data = e.data;
}, false);
// 3
addEventListener('message',  (e) => {
    // 接收到的数据
    const data = e.data;
}, false);

监听除了监听message事件，也可以指定函数

• 向主线程发送数据用self.postMessage()

self.onmessage = (e) => {
    const data = e.data;
    // 向主线程发送数据
    self.postMessage('Worker send');
}

• 关闭Worker线程(关闭自身)

self.close();

• Worker加载脚本

Worker内部如果要加载其他的js，要用importScripts()

importScripts('a.js');
// 也可以同时加载多个js
importScripts('a.js', 'b.js');

数据通信

• 主线程和Worker线程之间的通信，除了二进制File、Blob、ArrayBuffer等数据类型外，都是类似于JSON.parse(JSON.strify())这种传值，并不会影响到本线程以外的数据改动。

事实上，浏览器内部的运行机制是，先将通信内容串行化，然后把串行化后的字符串发给 Worker，后者再将它还原。

• 主线程和Worker线程之间交换二进制数据，上面拷贝的方式会造成性能问题，因为一般数据量大的会用二进制流方式去传输。为了避免这个问题，js允许主线程把二进制数据直接转移给worker线程，但是在转移没有完成之前，主线程无法使用二进制数据，这是为了防止出现多个线程同时修改数据的麻烦局面。这种转移数据的方法，叫做Transferable Objects。

Transferable Objects 格式:

worker.postMessage(arrayBuffer, [arrayBuffer]);

例如：

const ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);

例子

来源

• Worker 线程完成轮询

有时，浏览器需要轮询服务器状态，以便第一时间得知状态改变。这个工作可以放在 Worker 里面。

function createWorker(f) {
  var blob = new Blob(['(' + f.toString() +')()']);
  var url = window.URL.createObjectURL(blob);
  var worker = new Worker(url);
  return worker;
}

var pollingWorker = createWorker(function (e) {
  var cache;

  function compare(new, old) { ... };

  setInterval(function () {
    fetch('/my-api-endpoint').then(function (res) {
      var data = res.json();

      if (!compare(data, cache)) {
        cache = data;
        self.postMessage(data);
      }
    })
  }, 1000)
});

pollingWorker.onmessage = function () {
  // render data
}

pollingWorker.postMessage('init');

常用API

主线程

1. 浏览器原生提供Worker()构造函数，用来供主线程生成 Worker 线程。

var myWorker = new Worker(jsUrl, options);

Worker()构造函数，可以接受两个参数。第一个参数是脚本的网址（必须遵守同源政策），该参数是必需的，且只能加载 JS 脚本，否则会报错。第二个参数是配置对象，该对象可选。它的一个作用就是指定 Worker 的名称，用来区分多个 Worker 线程。

// 主线程
var myWorker = new Worker('worker.js', { name : 'myWorker' });

// Worker 线程
self.name // myWorker

2. Worker()构造函数返回一个 Worker 线程对象，用来供主线程操作 Worker。Worker 线程对象的属性和方法如下:
   1. Worker.onerror：指定 error 事件的监听函数。
   2. Worker.onmessage：指定 message 事件的监听函数，发送过来的数据在Event.data属性中。
   3. Worker.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
   4. Worker.postMessage()：向 Worker 线程发送消息。
   5. Worker.terminate()：立即终止 Worker 线程。

Worker线程

1. self.name： Worker 的名字。该属性只读，由构造函数指定。
2. self.onmessage：指定message事件的监听函数。
3. self.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
4. self.close()：关闭 Worker 线程。
5. self.postMessage()：向产生这个 Worker 线程发送消息。
6. self.importScripts()：加载 JS 脚本。

webpack应用

worker-loader

安装

yarn add -D worker-loader

webpack配置

• webpack.config.js

{
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' }
      }
    ]
  }
}

• vue.config.js(vue-cli3)

module.exports = {
    chainWebpack: (config) => {
        // 新增加一个loader
        config.module.rule('worker').test(/\.worker\.js$/).use('worker-loader').loader('worker-loader').options({ name: '[name].[hash].js' }).end()
    },
    // 如果开启多进程构建，worker-loader 会报 Cannot read property 'createChildCompiler' of undefined
    parallel: false
}

https://github.com/vuejs/vue-cli/issues/2785

项目中使用

• file.worker.js

import marked from 'marked';

self.addEventListener('message', (e) => {
  const data = e.data
  const md = marked(data, { sanitize: true });
  self.postMessage(md)
})

• App.js

import markdownWorder from './file.worker.js';

const worker = new markdownWorder()
const markdownText = `# demo

## demo1`

worker.postMessage(markdownText)

worker.onmessage = (event) => {
  const HTML = event.data
}