关于浏览器和node环境下的事件环差异

javascript在近些年在web端的作用越来越强大,不仅在浏览器端占据主导地位,在服务端也有一席之地,node.js做为以javascript语法作为服务端语言,而javascript作为一种单线程语言,为实现主线程的不阻塞,Event Loop方案孕育而生,浏览器和node中Event loop并不一样,浏览器的Event loop是在HTML5中定义的规范,而node中则由libuv库实现。

浏览器中的Event loop

  • 浏览器的任务队列分为宏任务和微任务
    • 宏任务:setTimeout, setInterval, setImmediate, I/O,原生事件回调函数,MessageChannel、postMessage等。
    • 微任务:process.nextTick, 原生Promise(有些实现的promise将then方法放到了宏任务中),Object.observe(已废弃), MutationObserver等。

那么浏览器中的任务执行顺序是怎么样的呢?

  1. 浏览器中,先执行当前栈,执行完主执行线程中的任务。
  2. 取出Microtask微任务队列中任务执行直到清空。
  3. 取出Macrotask宏任务中 一个 任务执行。
  4. 检查Microtask微任务中有没有任务,如果有任务执行直到清空。
  5. 重复3和4。

整个的这种运行机制又称为Event Loop(事件循环)

node中的Event loop

  • 在libuv内部有这样一个事件环机制。在node启动时会初始化事件环。
  • node中的event loop分为6个阶段,不同于浏览器的是,这里每一个阶段都对应一个事件队列,node会在当前阶段中的全部任务执行完,清空NextTick Queue,清空Microtask Queue,再执行下一阶段。
  • 在node.js里,process 对象代表node.js应用程序,可以获取应用程序的用户,运行环境等各种信息。process.nextTick()方法将 callback 添加到next tick 队列,并且nextTick优先级比promise等microtask高。
  1. timers:执行setTimeout() 和 setInterval()中到期的callback。
  2. I/O callbacks:上一轮循环中有少数的I/Ocallback会被延迟到这一轮的
  3. 这一阶段执行 idle, prepare:队列的移动,仅内部使用
  4. poll:最为重要的阶段,执行I/O callback,在适当的条件下会阻塞在这个阶段
  5. check:执行setImmediate的callback
  6. close callbacks:执行close事件的callback,例如socket.on("close",func)

总结

  • 同一个上下文下,MicroTask微任务会比MacroTask宏任务先运行。
  • 浏览器是先取出一个MacroTask宏任务执行,再执行MicroTask微任务中的所有任务。Node是按照六个阶段执行,每个阶段切换时,再执行MicroTask微任务队列
  • 同个MicroTask队列下process.tick()会优于Promise
  • setImmdieate()和setTimeout(),如果他们在异步i/o callback之外调用(在i/o内调用因为下一阶段为check阶段),其执行先后顺序是不确定的,需要看loop的执行前的耗时情况。

你可能感兴趣的:(关于浏览器和node环境下的事件环差异)