js学习笔记-事件循环机制

78 阅读1分钟

一、什么是js事件循环

JS引擎指代码是自上往下执行的,将回调队列的一个事件放入调用栈中,等调用栈执行完后,再从回调队列取事件放入执行栈中,当执行完回调队列中的事件后,会进入事件循环(EventLoop),会不断循环访问回调队列。

二、JS的执行顺序

1、JS引擎从上往下一行一行的执行代码

2、如果遇到报错的代码,停止执行下面的代码

3、先执行同步代码,再执行异步代码

三、事件循环的执行过程

同步代码: 调用代码后直接出栈

异步代码: 放到Web API中,等待合适的时机放入回调队列,等到栈空时事件循环(EventLoop)开始工作,进行轮询。

微任务比宏任务执行时机要早 微任务在Dom渲染之前完成,宏任务在Dom渲染之后完成。

四、微任务和宏任务的根本区别

宏任务是由浏览器决定的:

  1. setTimeout
  2. setInterval
  3. Ajax
  4. DOM事件

微任务是由ES6语法决定的:

  1. Promise
  2. async
  3. await

五、总结: 先清空调用栈(call stack)中的同步代码,执行微任务队列中的微任务,尝试DOM渲染,触发事件循环(Event Loop)反复询问回调队列中是否有要执行的语句,有则放入调用栈继续执行。