第三方即时通信服务-环信

第三方即时通信服务-环信

WebWorker

Javascript采用单线程模型，也就是说所有的任务只在主线程中完成。但是主线程有一个非常重要的任务：不间断的绘制界面（只有这样才能保证界面动画的流程以及功能的完整）。

如果在执行js的过程中，遇到了一些耗时任务，主线程就会因为执行这些耗时任务而耽误绘制UI界面，这样就会出现页面假死现象，导致页面崩溃。

WebWorker提供了多线程运行环境，可以将这些耗时代码放入WebWorker中异步执行，从而减轻主线程的压力，让主线程更多的关注UI绘制。避免出现页面假死现象。

案例：实现斐波那契数列，体验页面假死现象。

1	1	2	3	5	8	13	21	34	55	.....

function fb(n){
    return n<3 ? 1 : fb(n-1)+fb(n-2)
}

可以将耗时任务交给WebWorker来在子线程中异步完成，这样就不会阻塞主线程绘制UI，还可以实现耗时计算。

WebWorker的使用

创建WebWorker对象:

let mworker = new Worker('js脚本路径/xxx.js')

// 将耗时任务，写入xxx.js脚本中 
function fb(n){
    return n<3 ? 1 : fb(n-1)+fb(n-2)
}
fb(45)

上述代码虽然可以完成异步任务，在子线程中执行耗时代码。但是每次点击按钮都会new Worker()，会导致Worker启动过多，对CPU造成更大的压力。所以在使用Worker时，通常情况下不会创建太多的Worker对象，一个worker就可以搞定。

常见的Worker的使用步骤：

1. 当页面加载时，创建一个Worker。
2. 当触发某一个事件，需要执行耗时代码时，向worker发消息， worker接收到消息后，执行耗时代码。

Worker与主线程的通信

主线程向worker线程发消息

主线程发消息

let mworker = new Worker('...')
mworker.postMessage(38)  // 发消息

worker接收消息

// worker.js  // 监听事件  一旦接收到发过来的消息，就会执行回调
onmessage = (event)=>{
    console.log(event)
}

worker线程虽然可以计算耗时任务，但是不能更新界面，所有更新界面的代码都应该写在主线程中。所以需要把计算结果发给主线程。让主线程来进行后续操作。

worker线程向主线程发消息

worker发消息

// worker.js
postMessage('结果.....')

主线程接收消息

let mworker = new Worker('...')
// 主线程监听消息
mworker.onmessage = function(event){
    通过event.data   更新界面
}