Event Loop
一、进程和线程
1.进程：
资源分配的最小单位；应用程序的执行实例，每一个进程都是由私有的虚拟地址空间、代码、数据和其他系统资源所组成；进程拥有独立的堆栈空间和数据段，每当启动一个新的进程必须分配给他独立的地址空间，建立众多的数据表来维护它的代码段、堆栈段和数据段。
2.线程：
程序执行的最小单位；线程是进程内的一个独立执行单元，在不同的线程之间是可以共享进程资源的；
线程拥有独立的堆栈空间，但是共享数据段，他们彼此之间使用相同的地址空间，共享大部分数据，比进程更节俭，开销比较小，切换速度也比进程快，效率高。
二、同步任务和异步任务
我可以将任务分为同步任务和异步任务，但是这并不准确。
1.同步任务：
同步任务就是在主线程上排队执行的任务，只能执行完一个再执行下一个。
2.异步任务：
异步任务则不进入主线程，而是现在 event table 中注册函数，当满足触发条件后，才可以进入任务队列来执行。只有任务队列通知主线程说，我这边异步任务可以执行了，这个时候此任务才会进入主线程执行。
3.举例
console.log("a");
setTimeout(function(){
console.log("b")
},1000)
console.log("c")
//"a" "c" "b"
/*
1.console.log("a")是同步任务，进入主线程执行，打印"a"
2.setTimeout 是异步任务，先被放入 event table 中注册，1000ms 之后进入任务队列
3.console.log("c")是同步任务，进入主线程执行，打印"c"
当"a","c"被打印后，主线程去事件队列中找到 setTimeout 里的函数，并执行，打印"b"
*/
三、宏任务和微任务
同步任务和异步任务的划分其实并不准确，准确的分类方式是宏任务(Macrotask)和微任务(Microtask)。
1.宏任务
宏任务包括：script(整体代码)、setTimeout、setInterval、setImmediate、I/O、UI rendering。
2.微任务
微任务包括：process.nextTick、Promise、MutationObserver(html5新特性)。
这种分类的执行方式就是，执行一个宏任务，过程中遇到微任务时，将其放到微任务的事件队列里，当前宏任务执行完后，会查看微任务的事件队列，依次执行里面的微任务。如果还有宏任务的话，再重新开启宏任务…
通俗的可以理解为，首先执行script(整体代码)宏任务，从上往下执行，遇到宏任务放入宏任务队列，遇到微任务放入微任务队列 => 执行微任务队列的任务，然后执行宏任务队列的第一个任务
=>执行script(整体代码)宏任务,从上往下执行，遇到宏任务放入宏任务队列，遇到微任务放入微任务队列
=>查看微任务队列并执行
=>执行宏任务队列的第一个任务
=>查看微任务队列并执行
=>执行宏任务队列的第二个任务
=>查看微任务队列并执行
=>执行宏任务队列的第三个任务
=>查看微任务队列并执行
....
3.举例
setTimeout(function(){
console.log("a")
})
new Promise(function(resolve){
console.log("b")
for(var i=0;i<10000;i++){
i==99 && resolve();
}
}).then(function(){
console.log("c")
})
console.log("d")
//"b" "d" "c" "a"
/*
1.首先执行 script 下的宏任务，遇到 setTimeout，将其放入宏任务的队列里
2.遇到 Promise，new Promise 直接执行，打印"b"
3.遇到 resolve=>then 方法，是微任务，将其放入微任务的队列里
4.遇到 console.log("d")，直接打印"d"
5.本轮宏任务执行完毕，查看微任务，发现 then 方法里的函数，打印"c"
6.本轮 event loop 全部完成
7.下一轮循环，先执行宏任务，发现宏任务队列中有一个 setTimeout，打印"a"
*/
console.log("a")
setTimeout(function(){
console.log("b")
process.nextTick(function(){
console.log("c")
})
new Promise(function(resolve){
console.log("d")
resolve();//如果没有执行 resolve，那么 then 方法不执行
}).then(function(){
console.log("e")
})
})
process.nextTick(function(){
console.log("f")
})
new Promise(function(resolve){
console.log("g")
resolve()//如果没有执行 resolve，那么 then 方法不执行
}).then(function(){
console.log("h")
})
setTimeout(function(){
console.log("i")
process.nextTick(function(){
console.log("j")
})
new Promise(function(resolve){
console.log("k")
resolve()
}).then(function(){
console.log("l")
})
})
//"a" "g" "f" "h" "b" "d" "i" "k" "c" "j" "e" "l"
//第一轮宏任务打印："a" "g"
//第一轮微任务打印："f" "h"
//第二轮宏任务打印："b" "d"
//第二轮微任务打印："c" "e"
//第三轮宏任务打印："i" "k"
//第三轮微任务打印："j" "l"
console.log("script start")
setTimeout(function () {
console.log("a")
setTimeout(function () {
console.log("b")
})
new Promise(function (resolve) {
console.log("c")
resolve();
}).then(function () {
console.log("d")
setTimeout(function () {
console.log("e")
})
})
})
new Promise(function (resolve) {
console.log("f")
resolve()
}).then(function () {
console.log("g")
})
setTimeout(function () {
console.log("h")
setTimeout(function () {
console.log("i")
})
new Promise(function (resolve) {
console.log("j")
resolve();
}).then(function () {
console.log("k")
setTimeout(function () {
console.log("l")
new Promise(function (resolve) {
console.log("m")
resolve()
}).then(function () {
console.log("n")
setTimeout(function () {
console.log("o")
})
})
})
})
})
//执行一个宏任务，检查并执行微任务队列
//最终打印顺序为:
//"script start" "f" "g" "a" "c" "h" "j" "k" "b" "e" "i" "l" "m" "n" "o"
网友评论