每天一道面试题(8) - 浏览器和node中的事件循环机制

说一下浏览器和node中的事件循环机制

这道题大部同学都能答上来宏任务和微任务, 不知道浏览器事件循环请移至 10 分钟理解 JS 引擎的执行机制

但是对于node中的事件循环, 很多人都没有系统的学习过, 本篇文章主要梳理一下在回答这个问题时的要点

本文将从以下两个方面进行梳理, 大家在面试的时候也可以按照这个思路进行回答

浏览器的事件循环

由于JS是单线程的, 如果自上而下执行, 一段代码运行时间过长, 下面的代码就会堵塞. 所以js的异步机制应运而生

上面文章的参考链接中详细讲到, 浏览器的事件循环分为宏任务和微任务, 他们的划分如下

• 宏任务: 包括整体代码script，setTimeout，setInterval
• 微任务: promise, 以及由promise封装而成的axios, fetch等等

看下面例子就知道了

    setTimeout(function () {
   
   
        console.log('1')
    })
    new Promise(function (resolve) {
   
   
        console.log('2')
        setTimeout(() => {
   
   
            console.log('3')
        }, 0)
        resolve()
    }).then(function () {
   
   
        console.log('4')
    })
    console.log('5')
    
    //结果是: 2,5,4,1,3

1. 先执行宏任务 -> 2 , 5
2. 在执行本轮的微任务: 4
3. 开启新一轮宏任务: 1 , 3

再看一个

    console.log('1')