浅谈Event Loop(事件循环)

前言

Js是一门 单线程 语言，即同一时间只能执行一个任务，即代码执行是同步并且阻塞的。当一个任务在执行时，其他任务都要排队等待。但只能同步执行肯定是不行的，所以 有了来实现异步的函数， Event Loop 就是为了确保异步代码可以在同步代码执行后继续执行的。

一、Event Loop（事件循环）

HTML标准中是这样解释的：为了协调事件（event），用户交互（user interaction），脚本（script），渲染（rendering），网络（networking）等，用户代理（user agent）必须使用事件循环（event loops）。每个代理都有一个关联的事件循环。大体意思就是浏览器运行时有一个叫事件循环的机制。

一个事件循环里有很多个任务队列（task queues），根据任务的来源，将任务分配到不同的任务队列里。主线程循环不断从任务队列中读取事件。

二、任务队列

任务队列分为 macrotask queue （宏任务）和microtask queue（微任务），当 macrotask queue（宏任务） 空了（都处理完了）就开始处理 microtask queue（微任务），并且依次就将所有 microtask queue 都处理完（类似将 microtask queue 的所有任务合成为一个当 macrotask）。

• macrotasks: script、setTimeout、setInterval、requestAnimationFrame、I/O、UI rendering
• microtasks: process.nextTick、 Promises、 Object.observe、MutationObserver

三、  Event Loop 执行顺序

 Event Loop 的执行顺序如下所示：

• 首先执行script同步代码，这属于宏任务
• 当执行完所有同步代码后（一个宏任务），执行栈为空，查询是否有异步代码需要执行
• 执行所有微任务
• 当执行完所有微任务后，如有必要会渲染页面
• 然后开始下一轮 Event Loop，执行宏任务中的异步代码，也就是 setTimeout 中的回调函数