JS执行原理(Event Loop事件循环、微任务、宏任务)

一、事件循环Event Loop概念介绍

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

1.什么是事件循环

事件循环: 浏览器解析执行js代码的一种运行机制（执行规则），事件循环不属于js代码本身的范畴，而是属于js编译器的范畴。

2. 微任务、宏任务概念介绍

• 1.微任务与宏任务就属于js代码的范畴

• 2.js代码主要分为两大类： 同步代码、异步代码

• 3.异步代码又分为：微任务与宏任务

• 同步任务：同步任务不需要进行等待，必须立即看到执行结果，比如console.log

• 异步任务：异步任务需要等待一定的时候才能看到结果，比如setTimeout、网络请求

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

3.事件循环Event Loop执行机制

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

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

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

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

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

• 6.执行微任务代码

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

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

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

步骤如图：