阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      说说 event loop

      问题

      说说 event loop

      答案

      ⾸先, js 是单线程的,主要的任务是处理⽤户的交互,⽽⽤户的交互⽆⾮就 是响应 DOM 的增删改,使⽤事件队列的形式,⼀次事件循环只处理⼀个事件 响应,使得脚本执⾏相对连续,所以有了事件队列,⽤来储存待执⾏的事件, 那么事件队列的事件从哪⾥被 push 进来的呢。那就是另外⼀个线程叫事件触 发线程做的事情了,他的作⽤主要是在定时触发器线程、异步 HTTP 请求线程 满⾜特定条件下的回调函数 push 到事件队列中,等待 js 引擎空闲的时候去 执⾏,当然js引擎执⾏过程中有优先级之分,⾸先js引擎在⼀次事件循环中, 会先执⾏js线程的主任务,然后会去查找是否有微任务

      microtask(promise) ,如果有那就优先执⾏微任务,如果没有,在去查找 宏任务 macrotask(setTimeout、setInterval) 进⾏执⾏

      答案2

      JS中的event loop

      众所周知 JS 是⻔⾮阻塞单线程语⾔,因为在最初 JS 就是为了和浏览器交 互⽽诞⽣的。如果 JS 是⻔多线程的语⾔话,我们在多个线程中处理 DOM 就可能会发⽣问题(⼀个线程中新加节点,另⼀个线程中删除节点)

      JS 在执⾏的过程中会产⽣执⾏环境,这些执⾏环境会被顺序的加⼊到执⾏栈中。如果遇 到异步的代码,会被挂起并加⼊到 Task (有多种 task ) 队列中。⼀旦执⾏栈为空, Event Loop 就会从 Task 队列中拿出需要执⾏的代码并放⼊执⾏栈中执⾏,所以本 质上来说 JS 中的异步还是同步⾏为

      console.log('script start');
      setTimeout(function() {
          console.log('setTimeout');
      }, 0);
      console.log('script end');
      

      不同的任务源会被分配到不同的 Task 队列中,任务源可以分为 微任务 ( microtask ) 和 宏任务( macrotask )。在 ES6 规范中, microtask 称为 jobs,macrotask 称为 task

      console.log('script start');
      setTimeout(function() {
          console.log('setTimeout');
      }, 0);
      new Promise((resolve) => {
          console.log('Promise')
          resolve()
      }).then(function() {
          console.log('promise1');
      }).then(function() {
          console.log('promise2');
      });
      console.log('script end');
      // script start => Promise => script end => promise1 => promise2 => setTime
      

      以上代码虽然 setTimeout 写在 Promise 之前,但是因为 Promise 属于 微任务⽽ setTimeout 属于宏任务

      微任务

      • process.nextTick
      • promise
      • Object.observe
      • MutationObserver

      宏任务

      • script
      • setTimeout
      • setInterval
      • setImmediate
      • I/O
      • UI rendering

      宏任务中包括了 script ,浏览器会先执⾏⼀个宏任务,接下来有异步代码的话就先执⾏微任务

      所以正确的⼀次 Event loop 顺序是这样的

      • 执⾏同步代码,这属于宏任务
      • 执⾏栈为空,查询是否有微任务需要执⾏
      • 执⾏所有微任务
      • 必要的话渲染 UI
      • 然后开始下⼀轮 Event loop ,执⾏宏任务中的异步代码

      通过上述的 Event loop 顺序可知,如果宏任务中的异步代码有⼤量的计算 并且需要操作 DOM 的话,为了更快的响应界⾯响应,我们可以把操作 DOM 放⼊微任务中

      Node 中的 Event loop

      • Node 中的 Event loop 和浏览器中的不相同。
      • Node 的 Event loop 分为 6 个阶段,它们会按照顺序反复运⾏

      timer

      • timers 阶段会执⾏ setTimeout 和 setInterval
      • ⼀个 timer 指定的时间并不是准确时间,⽽是在达到这个时间后尽快执⾏回调,可能会因为系统正在执⾏别的事务⽽延迟

      I/O

      I/O 阶段会执⾏除了 close 事件,定时器和 setImmediate 的回调

      poll

      • poll 阶段很重要,这⼀阶段中,系统会做两件事情
        • 执⾏到点的定时器
        • 执⾏ poll 队列中的事件
      • 并且当 poll 中没有定时器的情况下,会发现以下两件事情
        • 如果 poll 队列不为空,会遍历回调队列并同步执⾏,直到队列为空或者系统限制
        • 如果 poll 队列为空,会有两件事发⽣
        • 如果有 setImmediate 需要执⾏, poll 阶段会停⽌并且进⼊到 check 阶段执⾏
        • setImmediate
        • 如果没有 setImmediate 需要执⾏,会等待回调被加⼊到队列中并⽴即执⾏回调
        • 如果有别的定时器需要被执⾏,会回到 timer 阶段执⾏回调。

      check

      check 阶段执⾏ setImmediate

      close callbacks

      • close callbacks 阶段执⾏ close 事件
      • 并且在 Node 中,有些情况下的定时器执⾏顺序是随机的
      setTimeout(() => {
          console.log('setTimeout');
      }, 0);
      setImmediate(() => {
          console.log('setImmediate');
      })
      // 这⾥可能会输出 setTimeout,setImmediate
      // 可能也会相反的输出,这取决于性能
      // 因为可能进⼊ event loop ⽤了不到 1 毫秒,这时候会执⾏ setImmediate
      // 否则会执⾏ setTimeout
      

      上⾯介绍的都是 macrotask 的执⾏情况, microtask 会在以上每个阶段完成后⽴即执⾏

      setTimeout(()=>{
          console.log('timer1')
          Promise.resolve().then(function() {
              console.log('promise1')
          })
      }, 0)
      setTimeout(()=>{
          console.log('timer2')
          Promise.resolve().then(function() {
          console.log('promise2')
      })
      }, 0)
      // 以上代码在浏览器和 node 中打印情况是不同的
      // 浏览器中⼀定打印 timer1, promise1, timer2, promise2
      // node 中可能打印 timer1, timer2, promise1, promise2
      // 也可能打印 timer1, promise1, timer2, promise2
      

      Node 中的 process.nextTick 会先于其他 microtask 执⾏

      setTimeout(() => {
          console.log("timer1");
          Promise.resolve().then(function() {
              console.log("promise1");
          });
      }, 0);
      process.nextTick(() => {
          console.log("nextTick");
      });
      // nextTick, timer1, promise1
      

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录