前言

前几天在理解node的事件环机制中引发了我对浏览器里Event Loop的好奇。我们都知道javascript是单线程的,任务是需要一个一个按顺序执行的,如果javascript有两个线程,一个为DOM增加样式,一个却要删除DOM,这样岂不是就会很混乱。单线程可以节约内存,但是必须等待前一个任务完成后才能执行下一个任务。接下来理解浏览器中的Event Loop,先看一张图:

Alt text

heap(堆)和stack(栈)

heap(堆)是用户主动请求而划分出来的内存区域,比如你new Object(),就是将一个对象存入堆中,可以理解为heap存对象。stack(栈)是由于函数运行而临时占用的内存区域,函数都存放在栈里。

Event Loop实现过程

在上一张图中。1、所有同步任务都在主线程上执行,形成一个执行栈;2、只要异步任务有了运行结果,就在任务队列(task queue)(队列是一个先进先出的数据结构,而栈是一个先进后出的数据结构)之中放置一个事件;
3、一旦执行栈中的所有同步任务执行完毕,系统就会读取任务队列,又将队列中的事件放到stack中依次执行,就是执行异步任务中的回调函数。这个过程是循环不断的,这就是Event Loop(事件循环);

宏任务和微任务

在上张图中,我们看到还有宏任务(MacroTask)和微任务(MicroTask)之分。
宏任务(MacroTask)
setTimeout setInterval (setImmediate)
微任务(MicroTask)
Promise.then MessageChannel微任务(vue中nextTick实现原理)
同步任务先执行,微任务会先执行,再执行宏任务,

举例说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
console.log(1);
setTimeout(function(){
console.log(2);
new Promise(function(resolve,reject){
console.log('promise');
resolve();
}).then(res=>{
console.log('promise.then');
})
});
setTimeout(function(){
console.log(4);
})
console.log(5);

将这行代码放入浏览器控制台中

Alt text

分析一下:
执行栈中同步任务先执行,先走console.log(1)和console.log(5);
接着是遇到setTimeout将它们的回调函数放入MacroTask(宏任务队列);
然后将任务队列中的回调函数依次放入主执行栈中执行,console.log(2),接着promise是立即执行,promise.then是微任务放入MicroTask中先执行;
最后执行第二个setTimeout的回调函数console.log(4);

题外话

还有浏览器中的Event Loop和node的Event Loop有所不同

Alt text

在node环境里,promise.then是最后执行的,这个之后再理解吧。
水平不足,欢迎各位指正。