JS执行原理，事件循环微任务，宏任务介绍

1.本文重点（一） ：微任务、宏任务概念介绍

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

2.本文重点（二）：微任务、宏任务到底谁先执行

正确回答：既可以说是先宏后微，也可以说是先微后宏

分析：先宏后微 因为：因为js执行的所有都是代码包在 script 标签里面，而 script 本身就是一个异步的宏任务， script 标签执行后，在优先执行 script 标签里面同步任务后再在执行异步的微任务微任务代码执行完毕后寻找下一个宏任务

分析：先微后宏

同级作用域优先执行微任务

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

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

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

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

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

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

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

什么是事件循环 : 浏览器解析执行js代码的一种运行机制（执行规则） 在js中讨论事件循环是没有意义的, : 事件循环不属于js代码本身的范畴，而是属于js编译器的范畴

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

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

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

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

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

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

• 6.执行微任务代码

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

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

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