深入理解web Worker

简介

我们都知道js是单线程模型。也就是说一次只能处理一件事情，前面的事情没有完毕，后面的事情要等待前面的事情处理完毕后才能执行。随着多核CPU的出现，我们可以最大限度的利用cpu多核，来提高js的性能。

Worker接口可以创建后台任务。即可以给js运行新增线程。用于处理一些耗时、耗费性能的任务（异步的除外）。

要解决的问题是：1.解决页面卡死问题。2.发挥多核CPU的优势，提高js性能。

知识点

1.非同源限制(本地代码如果以盘符的方式打开也不行，因为没有源啦)
主线程代码与Worker线程代码必须同源才能一起正常工作。

2.DOM、脚本限制
“Worker 线程所在的上下文环境与主线程不一样，无法读取主线程所在网页的 DOM 元素，也无法使用document、window这些对象。但是，Worker 线程可以使用navigator，location,XMLHttpRequest。除此之外，Worker 线程不能执行alert()、confirm()等方法.

3.任务顺序
Worker线程任务需要等待主线程任务结束才能进行。

4.Worker结束
可以主动关闭Worker线程。如果是多页应用的话，离开了Worker页面，Worker 也不会工作。

5.worker报错
报错不会影响主线程执行
可以用onEerror捕获错误 终止api

使用场景

1、如果是很消耗主线程性能的程序。可以考虑使用Web Worker。可以防止页面卡死情况。
2、从查询接口获取到数据之后的格式化过程逻辑，数据格式化这个过程可能涉及一些比较大的计算

例子

1、

//main.js 主线程
//传递一个数字给worker线程。worker线程计算处理完毕后，返回一个信息给主线程。

if (window.Worker) {   //这一步比较重要，兼容性判断。
        //1.创建一个worker线程。
	const myWorker = new Worker("worker.js");
        //2.向worker线程发送数据，值可以是number,string,boolean ,file,blob 等
	  myWorker.postMessage(10000000000);
	
        //3.监听后台任务，
	myWorker.onmessage = function(e) {
	    result.textContent = e.data;
	    console.log('Message received from worker');
	}

       //4.当离开页面的时候，或者需要结束worker时(比如任务完成时)，
        //可以结束Worker线程，不必占用资源       
       // myworker.terminate();


       //5.当myWorker异常时的时候，会触发onerror事件    
        myWorker.onerror = function() {
             console.log('There is an error with your worker!');
        }
} else {  //这一步非常重要。具体代码根据需要更具自己的业务写。
	console.log('Your browser doesn\'t support web workers.')
}

//worker.js  worker 线程
// 程序处理完毕后返回一个结果给主线程。//0 可以加载其他js进来，比如ajax.
//importScripts('ajax.js','b.js')  

//1.监听主线程
onmessage = function(e) {
  console.log('Worker: Message received from main script');

    接收来自主线程发送过来的数据
    let num = e.data;
//使用for循环模拟一个耗时、耗性能的任务。（如果这个for循环放在主线程，那么页面很可能会卡死，
//影响用户体验）。for(let i = 0;i<=num;i++){
    if(i==num){
       //2.向主线程发送数据
        postMessage('任务完成啦！')
    }
}
//3.worker 线程也可以调用close 方法来结束worker线程。
// close()


 //4.同样的，在worker 线程中也可以监听错误信息。
onerror = function(err){
    console.log(err)
    close();
}

2、

   var w = new Worker('worker.js');
    //w.onmessage=function(e){//监听子线程的message事件
    //     document.getElementById("num").innerText =   JSON.parse(e.data).num;
    //}
    w.addEventListener('message', function (e) { //监听worker发送过来的信息
      //监听子线程的message事件，既可以采用这种方式，也可以用上边注释里的方式
      let num: any = document.getElementById('num');
      console.log(e, 123);
      num.innerText = JSON.parse(e.data).num;
    });
    //主线程向子线程传递消息
    var btn = document.getElementsByTagName('button')[0];
    btn.onclick = function () {
      var num = document.getElementsByTagName('input')[0].value;
      w.postMessage(num); //向worker线程发送message 信息
    };
    var stopBtn: any = document.getElementsByTagName('button')[1];
    stopBtn.onclick = function () {
      w.terminate(); //停止webworker
    };

//worker.js
for (let i = 0; i < 99999; i++) {
    console.log(i); //假如它是计算量很大的，如果这个放在主线程，主线程就会被占领，白屏时间会变久
}
var obj = {
    num: 999
}
postMessage(JSON.stringify(obj));//向主线程发送信息
addEventListener("message", function (e) {  //监听主线程发送过来的信息
    obj.num = e.data * 2;
    postMessage(JSON.stringify(obj));  //向主线程发送信息
    //postMessage(obj);//报错
})