浏览器事件循环机制Event Loop

概念

Event Loop即事件循环，是指浏览器或者Node的一种解决JavaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用的异步的原理。是指函数在执行栈、宿主环境、任务队列中的循环移动。

栈，计算机科学中，限定仅在表尾进行插入和删除操作的线性表。栈是一种数据结构，遵循后进先出的原则。

队列，只允许在表的前端进行删除操作，在表的后端进行插入操作。（类似生活中排队）遵循先进先出的原则。

在Javascript中，任务被分为两种，一种是宏任务（MacroTask），一种是微任务(MicroTask)。

其中宏任务（MacroTask）包括：

• Script全部代码
• setTimeout
• setInterval
• setImmediate（仅IE10支持）
• I/O
• UI Rendring

微任务（MicroTask）包括：

• Process.nextTick(node独有)
• Promise

浏览器中的Event Loop

JavaScript有一个main thread主线程和 call stack调用栈（执行栈）

JS调用栈，采用后进先出原则，当函数执行的时候，会被添加到栈的顶部，当执行栈执行完成后，就会从栈顶移出，直到栈内被清空。

同步任务和异步任务

JS单线程任务可分为同步任务和异步任务。同步任务在调用栈中按照顺序等待主线程依次执行，异步任务会在异步任务有结果之后，将注册的回调函数放入任务队列中等待主线程空闲的时候，被读取到栈内等待主线程的执行。

Task Queue 任务队列

一种先进先出的数据结构

事件循环进程模型

执行栈在执行完同步任务之后，查看执行栈是否为空，如果执行栈为空，就会去检查微任务。如果为空，则执行宏任务，否则就一次性执行完所有微任务。

每次单个宏任务执行完毕后，检查微任务队列是否为空，如果不为空的话，会按照先进先出的规则，全部执行完微任务后，设置微任务队列为null，再执行下一个宏任务。