Js事件队列

javascript运行在单线程的环境下,许多异步方法的回调都会进入任务队列中,事件循环连有两种任务队列,宏任务队列和微任务队列

宏任务(macrotask)

  • setInterval
  • setTimeout
  • rquestAnimationFrame
  • setImmediate
  • I/O
  • UI rendering

微任务(microtask)

  • Promise
  • MutationObserver
  • Object.observe
  • process.nextTick(nodejs)

任务队列的执行顺序

  1. 每一次时事件循环,都是先执行同步代码后再执行任务队列里面的任务
  2. 任务队列和微任务队列是不同的队列,事件循环先执行微任务队列再执行宏任务队列
  3. 执行微任务队列的时候,微任务队列可以无限添加延长并执行,不需要等到下一次事件循环,直到微任务队列为空再执行宏任务队列

MutationObserver

MutationObserver给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力。该API设计用来替换掉在DOM3事件规范中引入的Mutation事件。可以是用此接口来验证上述的观点

点击outer元素时候,执行的顺序是

click -> promise -> mutate -> timeout

点击inner元素的时候,执行的顺序是

click -> promise -> mutate -> click -> promise -> mutate -> timeout -> timeout

扩展阅读

理解 JavaScript 中的 macrotask 和 microtask
通过microtasks和macrotasks看JavaScript异步任务执行顺序
setImmediate.js
macrotask与microtask
JavaScript 异步、栈、事件循环、任务队列

标签: javascript

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论