JS事件循环机制
Chao 工程师

宏任务:

  • script全部代码、setTimeoutsetIntervalsetImmediate(只有IE10支持)、I/OUI RenderingajaxrequestAnimationFrame

微任务:

  • Process.nextTick(Node独有)PromiseObject.observe(废弃)MutationObserver

Javascript 有一个 main thread 主线程和 call-stack 调用栈(执行栈),所有的任务都会被放到调用栈等待主线程执行。

Javascript单线程任务被分为同步任务异步任务。同步任务会在调用栈中按照顺序等待主线程依次执行,异步任务会在异步任务有了结果后,将注册的回调函数放入任务队列中等待主线程空闲的时候(调用栈被清空),被读取到栈内等待主线程的执行。

![image-20230417101412980](/Users/xiongchao/Library/Application Support/typora-user-images/image-20230417101412980.png)

如果有两个setTimeout,则先执行完第一个setTimeout里面所有的任务,再执行第二个里面的任务;

  1. js先执行同步任务,再执行异步任务,异步任务又可分为宏任务跟微任务;
  2. 将需要执行的js当作一个宏任务,第一次事件循环中,将所有代码推入到执行栈中,然后执行,执行过程中,将宏任务推入到宏任务队列中,将微任务推入到微任务队列中。
  3. 当第一次事件循环中的执行栈为空时,就去执行微任务队列中的事件,微任务队列为空时开始第二次事件循环;
  4. 第二次事件循环会将宏任务队列中最顶端的事件加入到执行栈中执行,执行过程中遇到微任务则推入到微任务队列中,如果遇到宏任务则把宏任务推入到宏任务队列中,当执行栈为空时,再去执行微任务队列中的事件,直到微任务队列为空,重复第4步中的操作开始下一次事件循环,直到所有宏任务,微任务都为空为止。
 Comments