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

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

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

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

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

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

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

 

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

2.MicroTask队列与MacroTask（中没有microTask）队列
 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 () {
// 只有 ie10 支持 其他浏览器不支持
16     console.log("setImmediate")
17 })
18 console.log("The end")
 
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

 

 

 

 更新中…………

posted @ 2020-10-29 11:49  HappyHacking!  阅读(102)  评论(0)  编辑  收藏  举报