JS执行机制

97 阅读1分钟

进入任务执行栈,先判断是同步还是异步,如果是同步就放到主线程执行,如果是异步,就需要判断是微任务还是宏任务。宏任务放到宏任务队列中等待执行,微任务放到微任务队列中等待执行。一次任务执行完成之后,JS会检测任务队列,先看有没有微任务,如果有,就把微任务放到主线程执行,如果没有微任务,就看有没有宏任务,如果有,就把宏任务事件回调放到主线程执行。

event loop它的执行顺序:

  • 一开始整个脚本作为一个宏任务执行
  • 执行过程中同步代码直接执行,宏任务进入宏任务队列,微任务进入微任务队列
  • 当前宏任务执行完出队,检查微任务列表,有则依次执行,直到全部执行完
  • 执行浏览器UI线程的渲染工作
  • 检查是否有Web Worker任务,有则执行
  • 执行完本轮的宏任务,回到2,依此循环,直到宏任务和微任务队列都为空

微任务包括: MutationObserverPromise.then()或catch()Promise为基础开发的其它技术,比如fetch APIV8的垃圾回收过程、Node独有的process.nextTick

宏任务包括scriptsetTimeoutsetIntervalsetImmediateI/OUI rendering

注意⚠️:在所有任务开始的时候,由于宏任务中包括了script,所以浏览器会先执行一个宏任务,在这个过程中你看到的延迟任务(例如setTimeout)将被放到下一轮宏任务中来执行。