欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

彻底搞懂JS事件循环机制(event loop)

程序员文章站 2022-06-19 16:21:18
知识点:js异步实现EventLoop、消息队列宏任务 与 微任务同步模式与异步模式首先要确定 js是单线程语言,js在设计之初用作用户互动,以及操作DOM。这决定了它只能是单线程(例如多线程操作同一dom,一个删除一个修改,这样会产生冲突)。但倘若只有同步模式,遇到耗时操作,页面便会阻塞,就像接口请求不到数据,或者图片未加载完成,页面就卡住一直等待。这样显然不现实也不实用。所以异步模式应运而生。你可能会有疑问,单线程的js是怎么完成异步操作的,可以这么理解js是单线程语言,但运行环境可...

知识点:

  1. js异步实现
  2. EventLoop、消息队列
  3. 宏任务 与 微任务

同步模式与异步模式

首先要确定 js是单线程语言,js在设计之初用作用户互动,以及操作DOM。这决定了它只能是单线程(例如多线程操作同一dom,一个删除一个修改,这样会产生冲突)。
但倘若只有同步模式,遇到耗时操作,页面便会阻塞,就像接口请求不到数据,或者图片未加载完成,页面就卡住一直等待。这样显然不现实也不实用。所以异步模式应运而生。
你可能会有疑问,单线程的js是怎么完成异步操作的,可以这么理解js是单线程语言,但运行环境可以开多线程帮助处理(例如: 浏览器,node…)。js后推出的Worker类,也是这么实现的。

先来一道热身题,看看你的答案与 console 记过是否一致
彻底搞懂JS事件循环机制(event loop)
倘若你的答案不正确,我帮你分析一下js代码运行的顺序

  1. 首先运行主线程。console.log同步代码直接压入执行栈,执行并弹出,页面打印 global begin
  2. 遇到setTImeout异步代码,函数进入event Table(异步事件注册表)并注册函数,webAPIs(浏览器)帮助我们倒计时,倒计时结束,再将回调函数放入event Queue(事件队列,消息队列),等待主线程运行完毕,会自动将队列里的任务放入主线程继续执行
  3. timer1、timer2倒计时后放入队列,主线程继续执行,打印global end
  4. 因为timer2的倒计时短,所以提前放入队列,所以打印timer2 invoke,然后注册inner开始倒计时。完后打印timer1 invoke。
  5. 最后再去队列取事件,打印inner invoke

怎么样,学废了嘛~~看完这个你对同步异步应该有了初步的了解

这里有一个大坑,例如setTimeout设置3000,延时3秒操作,但通常不是严格3s后便会执行,4s?5s?
之所以这样是因为,回调函数3s后放入队列,等待主线程完成才会执行。主线程的执行时间那就不知道了,你能一直阻塞。。。。
开发经常用的小技巧:setTimeout(fn,0) ,代码放入队列,等待主线程完成再执行。
提一嘴规则其实没有0 最低按4ms处理

EventLoop

所谓事件环,就是三步不断循环的js的执行闭环

  1. 同步主线程
  2. 异步函数放入eventTable注册,等待完成后放入eventQueue
  3. 同步主线程完成,取eventQueue放入主线程

宏任务(Tasks) 与微任务(Microtasks)

两个任务皆为 异步任务,区别就是执行顺序。
我总结一句话,消息队列 有微先走微,微可插宏队。

  • 宏任务:script(主线程)、setTimeout、setInterval、setImmediate
  • 微任务:Promise的then(promise传入的执行函数会立即执行属于同步)、process.nextTick(node环境)、Object.observe(已废弃)、 MutationObserver(观测dom变化)

给你一道题慢慢理解吧

Promise.resolve().then(()=>{
  console.log('Promise1')  
  setTimeout(()=>{
    console.log('setTimeout2')
  },0)
})

setTimeout(()=>{
  console.log('setTimeout1')
  Promise.resolve().then(()=>{
    console.log('Promise2')    
  })
},0)

// Promise1,setTimeout1,Promise2,setTimeout2

题目解析:

  1. 先走主线程,promise直接resolve,then里面函数属于异步微任务, setTimeout1属于异步宏任务,0延迟后,都放入事件环
  2. 当主线程走完,将事件环内的函数放入主线程,先微后宏,打印Promise1,然后再次遇到setTimeout,放入事件环。
  3. setTimeout1回调执行, 打印setTimeout1,遇到promise放入事件环,主线程第二遍走完,现在事件环有 setTimeout2和Promise2。
  4. 微任务可插队宏任务,先打印 Promise2,再打印 setTimeout2

终极题目

这个搞会了基本没人考得住你 (node版本太低,会和高版本出现答案不同的情况)。
不懂了评论基本会回

console.log('1');
setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

node环境执行答案:1、7、6、8、2、4、3、5、9、11、10、12

本文地址:https://blog.csdn.net/CherryCola_zjl/article/details/112007310