阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      浏览器 Eventloop 和 Node 中的有什么区别

      问题

      浏览器 Eventloop 和 Node 中的有什么区别

      答案

      众所周知 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');
      

      以上代码虽然 setTimeout 延时为 0 ,其实还是异步。这是因为 HTML5 标准规定这个 函数第⼆个参数不得⼩于 4 毫秒,不⾜会⾃动增加。所以 setTimeout 还是会在 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 renderin

      很多⼈有个误区,认为微任务快于宏任务,其实是错误的。因为宏任务中包括了 script ,浏览器会先执⾏⼀个宏任务,接下来有异步代码的话就先执⾏微任务

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

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

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

      更多面试题

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

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

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

      目录
      目录