当js一个时间内有大量的计算的时候,会导致浏览器卡顿。使用web worker,把较大计算量的方法分给分线程处理,避免主线程卡死影响用户体验。那么线程之间的数据是怎么交互的呢?
以裴波那契数列计算为例
主线程代码:
let btn = document.getElementById('btn')
btn.onclick = function(){
let worker = new Worker('worker.js')
worker.onmessage = function (event) {// 接收消息监听
console.log('主线程接收分线程返回的数据', event.data)
}
worker.postMessage(1000) // 主线程向分线程发送数据
}
分线程worker.js代码:
function fibonacci(n) {
return n <= 2 ? 1 : fibonacci(n -1) + fibonacci(n -2)
}
let onmessage = function(event) {
let num =event.data
let result = fibonacci(num)
postMessage(result)
}
事件机制如图所示: