web worker学习日志(—简单的使用)

1、首先简单介绍一下worker，MDN给出的定义是创建一个独立于主线程的javascript的后台线程。

优点：

　　1、可以利用它来处理一些耗时的任务，而不会阻塞主线程。

缺点：

　　1、使用限制比较多，在worker线程里不能使用window、document对象；

　　2、受到浏览器同源策略的限制；

　　3、主线程和worker线程之间只能通过message来通信；

2、关于new Worker()，他接收两个参数(url, options)，url参数是要执行脚本的url，他只支持text/javascript。

options包含可在创建对象实例时设置的选项属性的对象，具体详见MDN网站。

3、在webpack项目中，直接使用new Worker()会有问题，所以需要添加worker-loader。关于worker-loader的更多解释信息请移步webpack官网

 1 {
 2   ...,  
 3   module: {
 4     rules: [
 5       {
 6         test: /\.worker\.js$/,
 7         use: { 
 8           loader: 'worker-loader',
 9           options: {inline: true}
10         }
11       }
12     ]
13   }
14 }

4、然后书写my.worker.js，下面是我写的一个简单demo。

self.onmessage =  function(e) {//监听主进程的消息
  　...
    postMessage({data, done: true})//向主进程发送消息

}

5、由于引入了worker-loader，所以可以直接使用import引入外部js。如果未使用worker-loader，请移步MDN官网

import Worker from './my.worker.js';
myWorker = new Worker();
myWorker.postMessage('my message');//向子进程发送消息
encodeWorker.onmessage = function(e) {
    let {data, done} = e.data;
    if(done){
        encodeWorker.terminate()
    }
}

6、更多详细解释，可以移步MDN官网。

7、个人在项目中的实践，主要是crypto-js对文件加密的过程放在了worker中，详情请移步crypto-js学习日志，在线demo请移步我的GitHub

web worker学习日志(—简单的使用)

推荐阅读