第三方即时通信服务-环信
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的使用步骤:
- 当页面加载时,创建一个
Worker
。 - 当触发某一个事件,需要执行耗时代码时,向
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 更新界面
}