javaSctipt 事件循环 Event Loop 机制

76 阅读1分钟

个人理解

  • 首先,大家都知道浏览器在执行JavaScript时是单线程的,之所以设计成单线程,是因为需要保证代码的安全性。假设执行js代码是多线程执行的,在第一个线程上修改了一个 dom 元素,但是在第二个线程上又同样修改了这个dom,就会导致最后呈现出现的页面效果与预期不符。

  • Event Loop顾名思义,事件循环。我们可以理解将这套机制理解为有一个圆形的通道(这也是常说的执行栈),在这个通道旁有一个任务队列

  • js代码执行时,首先会看这个执行栈中是否为空,如果为空,就会查询旁边的任务队列,将任务队列中的第一个任务丢向执行栈中执行(在这个执行栈中,还会遵循宏任务和微任务的执行规律,宏任务我理解为同步代码,微任务为异步代码,执行完宏任务,查询是否有微任务需要执行),执行完毕后,释放任务,再次形成栈空状态;继续查询任务队列,并取第一个任务放置执行栈中,重复此操作,直到任务队列中的任务全部执行完毕。

注释

  • 宏任务包括setTimeoutsetIntervalrequestAnimationFrameAjaxfetchscript(浏览器会先执行一个宏任务,接下来有异步代码的话就先执行微任务) 标签的代码
  • 微任务包括Promise.thenMutationObserverObject.observe