快速了解浏览器事件循环Event Loop

背景

首先我们知道JS是单线程运行的，也就是每次只能执行一个任务。那么为了协调事件，用户交互，脚本，渲染，网络任务等，必须使用事件循环进行协调

事件循环机制有浏览器和Node两种实现，这里暂不讨论Node部分

基础知识

• 栈 是一种先进后出的数据结构
• 队列 是一种先进先出的数据结构

JS运行机制

1. 首先任务一个一个地进入主线程执行，形成一个执行栈(stack)
2. 同步任务会立刻执行，异步任务会记录下，等待回调函数执行的时机
3. 当回调函数需要触发了，就把回调函数放进任务队列(queue)
4. 当执行栈里的任务全部执行完毕，主线程空闲，就回去读取任务队列里的任务，进入主线程执行
5. 如此又回到了步骤1，循环这样一个“读取——执行”的过程

宏任务和微任务

上面的运行机制是简化了的，实际上任务可以细分为宏任务和微任务。上面所说的步骤2实际上会区分宏任务和微任务，分别放入不同的队列。

• 宏任务：script(整体代码), setTimeout, setInterval, I/O, UI Rendering, setImmediate(IE10和Node独有)
• 微任务