浏览器的eventloop和node的eventloop

1.什么是event loop

event loops也就是事件循环&＃xff0c;它是为了协调事件&＃xff08;event&＃xff09;&＃xff0c;用户交互&＃xff08;user interaction&＃xff09;&＃xff0c;脚本&＃xff08;script&＃xff09;&＃xff0c;渲染&＃xff08;rendering&＃xff09;&＃xff0c;网络&＃xff08;networking&＃xff09;&＃xff0c;用户代理&＃xff08;user agent&＃xff09;的工作而产生的一个机制。

2.Javascript的运行机制

2.1 单线程的Javascript

Javascript语言的一大特点就是单线程&＃xff0c;也就是说在同一时间只做同一件事。这是基于js的执行环境决定的&＃xff0c;因为在浏览器中&＃xff0c;有许多的dom操作&＃xff0c;如果在同一时间操作一个dom&＃xff0c;很容易造成混乱&＃xff0c;所以为了避免发生同一时间操作同一dom的情况&＃xff0c;js选择只用一个主线程执行代码&＃xff0c;来保证程序执行的一致性&＃xff0c;单线程的特点也应用到了node中。

2.2 Javascript中的任务和队列

Javascript是单线程的&＃xff0c;也就意味着所有任务需要排队&＃xff0c;前一个任务执行完&＃xff0c;才能执行下一个任务&＃xff0c;但是因为IO设备&＃xff08;输入输出设备&＃xff09;很慢&＃xff08;比如Ajax从网络读取数据&＃xff09;&＃xff0c;不得不等待结果返回之后才能继续&＃xff0c;这样的执行效率很慢。
于是分成了两种任务来处理&＃xff0c;同步任务和异步任务。
同步任务是指在主线程排队的任务&＃xff0c;只有前面的任务执行完之后才执行后面的任务。
异步任务指的是任务不进入主线程&＃xff0c;而进入到一个任务队列&＃xff08;task queue&＃xff09;&＃xff0c;主线程的任务可以继续往后执行&＃xff0c;而在任务队列里的异步任务执行完会通知主线程。

3.浏览器的event loop

3.1执行栈与事件队列

当Javascript代码执行的时候会将不同的变量存于内存中的不同位置&＃xff1a;堆&＃xff08;heap&＃xff09;和栈&＃xff08;stack&＃xff09;中来加以区分。其中&＃xff0c;堆里存放着一些对象。而栈中则存放着一些基础类型变量以及对象的指针。当所有所有同步任务都在主线程上执行时&＃xff0c;这些任务被排列在一个单独的地方&＃xff0c;形成一个执行栈

当浏览器js引擎解析这段代码时&＃xff0c;会将同步任务顺序加入执行栈中依次执行&＃xff0c;当遇到异步任务时并不会一直等待异步任务返回结果再执行后面的任务&＃xff0c;而是将异步任务挂起&＃xff0c;继续执行同步任务&＃xff0c;当异步任务返回结果时&＃xff0c;将异步任务的回调事件加入到一个事件队列&＃xff08;Task Queue&＃xff09;当中去&＃xff0c;这个事件队列里的任务并不会立即执行&＃xff0c;而是等同步任务全部执行完&＃xff0c;再依次执行事件队列里的事件。

依次执行同步任务&＃xff0c;完成后依次执行事件队列&＃xff0c;完成后再去执行同步任务&＃xff0c;这样形成了一个循环&＃xff0c;就是事件循环&＃xff08;Event Loop&＃xff09;。

3.2宏任务&＃xff08;macro task&＃xff09;与微任务&＃xff08;micro task&＃xff09;

异步任务又分为宏任务与微任务两种&＃xff0c;微任务并不是老老实实的按照事件队列的顺序去执行&＃xff0c;而是按照microTask—>macroTask的顺序去执行&＃xff0c;先执行完队列中所有的microTask再去执行macroTask

宏任务和微任务的分类

• MacroTask: script(整体代码), setTimeout, setInterval, setImmediate&＃xff08;node独有&＃xff09;, I/O, UI rendering

• MicroTask: process.nextTick&＃xff08;node独有&＃xff09;, Promises, Object.observe(废弃), MutationObserver

举个例子
setTimeout(()&＃61;>{console.log(1)
})Promise.resolve().then(function() {console.log(2)
})
console.log(3)执行结果是&＃xff1a;3 2 1
这是因为事件循环的顺序是&＃xff1a;同步代码&＃61;>微任务&＃61;>宏任务

4.node的event loop

• timers: 这个阶段执行定时器队列中的回调如 setTimeout() 和 setInterval()。

• I/O callbacks: 这个阶段执行几乎所有的回调。但是不包括close事件&＃xff0c;定时器和setImmediate()的回调。

• idle, prepare: 这个阶段仅在内部使用&＃xff0c;可以不必理会。

• poll: 等待新的I/O事件&＃xff0c;node在一些特殊情况下会阻塞在这里。

• check: setImmediate()的回调会在这个阶段执行。

• close callbacks: 例如socket.on(‘close’, …)这种close事件的回调。

event loop的每一次循环都需要依次经过上述的阶段。 每个阶段都有自己的callback队列&＃xff0c;每当进入某个阶段&＃xff0c;都会从所属的队列中取出callback来执行&＃xff0c;当队列为空或者被执行callback的数量达到系统的最大数量时&＃xff0c;进入下一阶段。这六个阶段都执行完毕称为一轮循环。

举个例子&＃xff08;1&＃xff09;
浏览器与Node执行顺序的区别
setTimeout(()&＃61;>{console.log(&＃39;timer1&＃39;)Promise.resolve().then(function() {console.log(&＃39;promise1&＃39;)})
})setTimeout(()&＃61;>{console.log(&＃39;timer2&＃39;)Promise.resolve().then(function() {console.log(&＃39;promise2&＃39;)})
})


浏览器输出&＃xff1a;
time1
promise1
time2
promise2
因为promise是microtask&＃xff0c;所以当第一个setTimeout执行完之后&＃xff0c;先执行promise。

Node输出&＃xff1a;
time1
time2
promise1
promise2
因为time1和time2都在timers阶段&＃xff0c;所以先执行timers&＃xff0c;promise的回调被加入到了microtask队列&＃xff0c;等到timers阶段执行完毕&＃xff0c;在去执行microtask队列。

举个例子&＃xff08;2&＃xff09;
MicroTask队列与MacroTask队列
setTimeout(function () {console.log(1);
});
console.log(2);
process.nextTick(() &＃61;> {console.log(3);
});
new Promise(function (resolve, rejected) {console.log(4);resolve()
}).then(res&＃61;>{console.log(5);
})
setImmediate(function () {console.log(6)
})
console.log(&＃39;end&＃39;);

node输出的顺序是
2
4
end
3
5
1
6
首先执行的是同步任务中的2 4 end&＃xff0c;然后是microTask队列中的process.nextTick:3、promise.then:5,最后是macroTask队列中的setTimeout:1、setImmediate:6&＃xff0c;由于Timer优于Check阶段&＃xff0c;所以先1后6。