Event Loop事件循环
一
1.首先要知道 JavaScript 的运行机制。文字太多请移步--
2.正是因为 JavaScript 的单线程,事件执行需要排队和循环执行。(同步任务,异步任务(宏任务(macroTask)和微任务(microTask)))
3.什么是事件循环(event loop)
为了协调事件(event)、用户交互(user interaction)、脚本(script)、渲染(rendering)、网络(netWork)、用户代理(user agent)的工作而产生的一个机制。
4.node和浏览器的event loop
其实网上讲的都不少,但没有概括性,绕来绕去的很难理解,下面是我的概括和理解有错误请大佬一定帮我指出,感谢^v^
两个在执行宏任务队列(任务中没有微任务前提下)和微任务队列时结果一致,步骤如下:
ster1:同步任务
step2:微任务
step3:宏任务
两个在执行宏任务队列(有微任务)时结果才不同,步骤如下:
node:在step3大前提下则有 循环执行所有宏任务遇到微任务加入到微任务队列,宏任务循环执行结束后执行微任务(此时的微任务是宏任务中的与上面step2中微任务不搭嘎)即宏任务先执行。
浏览器:在step2执行完后取一个宏任务压入到执行栈结束后再取一个宏任务如此循环。
我理解两个的区别并不是微任务先执行还是宏任务先执行,网上这么讲的太有误导性了。如果还不理解请继续看下面代码示例,毕竟绝知此事要躬行^v^。
二
1.node event loop
|
|
|
event loop的每一次循环都需要依次经过上述的阶段。 每个阶段都有自己的callback队列,每当进入某个阶段,都会从所属的队列中取出callback来执行,当队列为空或者被执行callback的数量达到系统的最大数量时,进入下一阶段。这六个阶段都执行完毕称为一轮循环。
1 console.log("start")
2 setTimeout(function () {
3 console.log("setTimeout")
4 });
5 console.log("1")
6 process.nextTick(() => { //浏览器不支持
7 console.log("nextTick")
8 });
9 new Promise(function (resolve,rejected) {
10 console.log("promise")
11 resolve()
12 }).then(res => {
13 console.log("promiseThen")
14 });
15 setImmediate(function () {
|
node: start 1 promise The end nextTick promiseThen setTimeout setImmediate chrom: start 1 promise The end promiseThen undefined(执行结束) setTimeout
|
3.宏任务(有microTask)中执行顺序
1 setTimeout(() => { 2 console.log('timer_1') 3 Promise.resolve().then(function() { 4 console.log('promise1') 5 }) 6 }); 7 setTimeout(() => { 8 console.log('timer_2') 9 Promise.resolve().then(function() { 10 console.log('promise2') 11 }) 12 }); |
node: timer_1
timer_2
promise1
promise2
chrom:timer_1
promise1
timer_2
promise2
|
|
更新中…………