web worker

web worker

1.解决问题：

js是单线程的，即一次只能做一件事，所以当js代码中存在大计算量任务时势必会造成阻塞，webworker就是基于浏览器新增另一条线程来执行大计算量任务，从而解决运行阻塞的问题，例如下面代码：

console.time('1号任务')
console.time('2号任务')

for(let i=1;i<10000000000;i++){
    // 模拟大计算量的任务,后续的任务会因为这段代码阻塞
}
console.timeEnd('1号任务')

setTimeout(()=>{
    console.timeEnd('2号任务')
},2000)

2.使用方法：

创建一个新的js文件，将需要执行的任务放入，并用服务器环境启动

使用web worker语法

// test.js 存放大计算量代码
console.time('1号任务')
for(let i=1;i<10000000000;i++){
    // 模拟大计算量的任务,后续的任务会因为这段代码阻塞
}

// 向主线程发送消息
postMessage(a)

console.timeEnd('1号任务')

// index.js
console.time('2号任务')

// 语法（参数是分线程路径）
const w = new Worker('./test.js')

// 监听分线程发送的消息
w.onmessage = (data)=>{
    console.log(data.data)
}

// 监听分线程错误
w.onerror = ()=>{
    console.log('分线程出错了')
}

setTimeout(()=>{
    console.timeEnd('2号任务')
},2000)