web worker

web worker

js的事件循环

同步任务和异步任务

• 同步任务：被主线程调用的任务，同步任务存储在一个执行栈中，不断的被主线程调用
• 异步任务：异步任务存储在任务队列，等待主线程调用，当执行栈中的任务执行完，主线程就会自动调用任务队列中的任务，然后把这些任务放到执行栈开始执行
• 异步任务：异步事件和定时器事件
• 定时器事件：每当开始一个定时器，就相当于在当前的任务队列的尾部添加一个任务

web worker的作用

• js默认是单线程模型，通过webWorker可以允许主线程创建多个子线程，然后把一些任务分配给子线程执行，但是始终只有一个主线程，所有的webWorker子线程受到主线程的控制，子线程执行完成后把结果返回给主线程

webWorker的限制

• 同源限制
  • 就是主线程脚本文件必须和子线程脚本文件在同一条访问根目录下
• 通信限制
  • 线程之间由于不在同一个上下环境，不能直接进行通信，必须通过消息转发的方式完成
• 文件限制
  • 子线程不能读取本地文件，子线程加载的文件必须来自网络
• dom限制
  • 子线程不能访问document，window，但是能够访问location和navigator
• 脚本限制
  • 子线程不能使用alert()和confirm(),但是可以使用ajax
• 因为有了这些限制，实际上js还是单线程,所有的子线程都是受到主线程的控制

webworker的使用

• 创建webWorker子线程

#在主线程中通过Worker()构造函数创建一个对象，这个对象就是子线程
let webWorker=new Worker("data.js") #data.js必须是通过网络获取的文件路径，否则会报错

• 线程通信

#主线程通过webWorker.postMassage()向子线程发送信息
webWorker.postMessage({id:1,name:"小明"})

#主线程通过webWorker.onmessage事件监听子线程传递过来的信息
webWorker.onmessage=function(event){
    console.log(event.data)
}

#主线程通过webWorker.onerror事件监听子线程发生错误
webWorker.onerror=function(event){
    console.log(event)
}

#self代表当前对象
#子线程通过self.onmessage监听主线程传递过来的信息
self.onmessage=function(event){
    let {data}=event #主线程传递过来的信息
    
    self.postMessage(data) #向主线程发送信息
}

关闭线程

#关闭主线程
webWorker.terminate();

#关闭子线程
self.close();

在子线程中加载其他脚本文件

importScripts("1","2") #可以加载多个脚本文件，1，2代表脚本文件的路径