【今天你背面试题了嘛?】JS执行原理(Event Loop事件循环、微任务、宏任务)

1.1-事件循环Event Loop概念介绍

事件循环Event Loop又叫事件队列，两者是一个概念

• 1.什么是事件循环 : 浏览器解析执行js代码的一种运行机制（执行规则）

  • 事件循环指的是js代码所在运行环境（浏览器、nodejs）编译器的一种解析执行规则。

    • 在js中讨论事件循环是没有意义的, : 事件循环不属于js代码本身的范畴，而是属于js编译器的范畴

      • 说人话： js代码可以理解为是一个人在公司中具体做的事情， 而 事件循环 相当于是公司的一种规章制度。 两者不是一个层面的概念。

1.2-微任务、宏任务概念介绍

• 1.微任务与宏任务就属于js代码的范畴
• 2.js代码主要分为两大类： 同步代码、异步代码
• 3.异步代码又分为：微任务与宏任务

• 同步任务：同步任务不需要进行等待，必须立即看到执行结果，比如console
• 异步任务：异步任务需要等待一定的时候才能看到结果，比如setTimeout、网络请求

• 异步任务，又可以细分为宏任务和微任务。下面列举目前学过的宏任务和微任务。

任务（代码）	宏/微 任务	环境
	宏任务	浏览器
事件	宏任务	浏览器
网络请求（Ajax）	宏任务	浏览器
setTimeout() 定时器	宏任务	浏览器 / Node
fs.readFile() 读取文件	宏任务	Node
Promise.then()	微任务	浏览器 / Node
async/await	微任务	浏览器 / Node

1.3-事件循环Event Loop执行机制

• 1.进入到script标签,就进入到了第一次事件循环.

• 2.遇到同步代码，立即执行

• 3.遇到宏任务,放入到宏任务队列里.

• 4.遇到微任务,放入到微任务队列里.

• 5.执行完所有同步代码

• 6.执行微任务代码

• 7.微任务代码执行完毕，本次队列清空

• 寻找下一个宏任务，重复步骤1

  • 以此反复直到清空所以宏任务，这种不断重复的执行机制，就叫做事件循环