前端开发--事件循环机制（Event Loop）小结

Js本身是单线程的，它的异步和多线程是通过事件循环机制来实现的

浏览器端的事件循环机制（Event Loop）

三部分：

• 一个函数调用栈（stack）
  方法（函数）调用栈 JS stack 占用主线程的资源；调用时一个一个进栈，调用完成后再一个一个出栈。
• 一个宏任务队列tasks
  宏任务队列，也叫消息（任务）队列 Message Queue； 事件循环机制不断去检查stack里是否为空，如果为空就把宏任务放到stack里（当且仅当stack为空时，才会执行宏任务里的代码）。
• 一个微任务队列（Microtask Queue）
  在事件循环调度一个宏任务之前，查看微任务队列里面是否还有未执行的任务，要把微任务队列中的任务执行完，再执行下一个宏任务；Promise.then( ) async await创建的异步操作加入微任务队列中

第二轮事件循环：宏任务和微任务（两个宏任务之间存在微任务队列）

• 宏任务（macrotask 也叫tasks）：
  setTimeout setInterval I/O操作（比如文件读取 网络请求） requestAnimationFrame UI渲染线程等都属于宏任务

• 微任务（microtask 也叫jobs）：
  Promise.then( )（注：Promise构造函数里的代码是同步执行的）、Object.observe等属于微任务

• Event loop会不断循环的去取tasks队列中最老的一个任务推入栈中执行，并在当次循环里依次执行并清空microtask队列里的任务。

了解：浏览器中的Event Loop跟node中的Event Loop是不一样的

• Node在宏任务开始的阶段，将宏任务队列中的所有的任务都取出来执行（注意：浏览器的事件循环是先只取一个宏任务），每个宏任务阶段执行完毕后，开始执行微任务，再开始执行下一阶段的宏任务，以此构成事件循环。
• Node的微任务中：nextTick比promise的优先级高
• Node的宏任务：setTimeout和setImmediate执行顺序问题（取决于loop跟timer的大小关系）

本文地址：https://blog.csdn.net/wennianzhu/article/details/107481825