浏览器和Node的事件循环

Posted 2022-01-31 还是不会呀

事件循环

• • 事件循环解析
  • 浏览器内的事件循环面试题
  • • 面试题一
    • 面试题二
    • 面试题三
    • • 面试题3.1
      • 面试题3.2
      • 面试题3.3
  • Node内的事件循环面试题
  • • 面试题一

事件循环解析

进程：操作系统管理程序的一种方式。

线程：操作系统能够进行调度的最小单位。

javascript代码的执行是单线程执行的，但是为什么碰到异步函数却不会阻塞后续代码的继续执行呢？这就用到了事件循环。

定义：事件循环是JavaScript代码和浏览器或者Node之间的桥梁。

浏览器是多进程多线程的，在JavaScript代码执行时，知道在内存内维护着执行上下文栈(函数调用栈),碰到异步代码之所以不会阻塞后续代码的执行，是因为异步函数回调交给了浏览器或者Node的另一个线程，到达一定的时间会将对应的回调放入事件队列内，等到顶层代码执行完之后，浏览器或者Node就到这个事件队列内取出回调函数进行执行。

浏览器的事件队列分为：宏任务队列[setTimeout、setInterval]和微任务队列[Promsie的then回调、queueMicortask、await语句以下代码]。在执行宏任务队列内的回调函数之前，都要保证微任务队列时空的，若不为空，则先执行微任务队列内的回调。

Node的事件队列分为：宏任务队列(timer queue[setTimeout、setInterval] > check queue[setImmediate])和微任务队列（next tick queue[process.nextTick] > other queue[Promsie的then回调、queueMicortask]） ,还是微任务的优先级高于宏任务。

浏览器内的事件循环面试题

面试题一

setTimeout(function () 
  console.log("setTimeout1");
  new Promise(function (resolve) 
    resolve();
  ).then(function () 
    new Promise(function (resolve) 
      resolve();
    ).then(function () 
      console.log("then4");
    );
    console.log("then2");
  );
);

new Promise(function (resolve) 
  console.log("promise1");
  resolve();
).then(function () 
  console.log("then1");
);

setTimeout(function () 
  console.log("setTimeout2");
);

console.log(2);

queueMicrotask(() => 
  console.log("queueMicrotask1");
);

new Promise(function (resolve) 
  resolve();
).then(function () 
  console.log("then3");
);

// promise1
// 2
// then1
// queueMicrotask1
// then3
// setTimeout1
// then2
// then4
// setTimeout2

面试题二

async function async1() 
  console.log("async1 start");
  await async2();
  console.log("async1 end");


async function async2() 
  console.log("async2");


console.log("script start");

setTimeout(function () 
  console.log("setTimeout");
, 0);

async1();

new Promise(function (resolve) 
  console.log("promise1");
  resolve();
).then(function () 
  console.log("promise2");
);

console.log("script end");

// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout

面试题三

返回值不同打印的结果也不同

• 返回值是普通的值或者对象，正常执行。

• 返回值是 thenable对象，进入微任务队列向后推迟一次。

• 返回值是 Promsie对象，进入微任务队列向后推迟二次。

面试题3.1

Promise.resolve()
  .then(() => 
    console.log(0);
    return 4;
  )
  .then((res) => 
    console.log(res);
  );

Promise.resolve()
  .then(() => 
    console.log(1);
  )
  .then(() => 
    console.log(2);
  )
  .then(() => 
    console.log(3);
  )
  .then(() => 
    console.log(5);
  )
  .then(() => 
    console.log(6);
  );

// 0
// 1
// 4
// 2
// 3
// 5
// 6

面试题3.2

Promise.resolve()
  .then(() => 
    console.log(0);
    return 
      then: function (resolve, reject) 
        resolve(4);
      ,
    ;
  )
  .then((res) => 
    console.log(res);
  );

Promise.resolve()
  .then(() => 
    console.log(1);
  )
  .then(() => 
    console.log(2);
  )
  .then(() => 
    console.log(3);
  )
  .then(() => 
    console.log(5);
  )
  .then(() => 
    console.log(6);
  );

// 0
// 1
// 2
// 4
// 3
// 5
// 6

面试题3.3

Promise.resolve()
  .then(() => 
    console.log(0);
    return new Promise((resolve, reject) => 
      resolve(4);
    );
  )
  .then((res) => 
    console.log(res);
  );

Promise.resolve()
  .then(() => 
    console.log(1);
  )
  .then(() => 
    console.log(2);
  )
  .then(() => 
    console.log(3);
  )
  .then(() => 
    console.log(5);
  )
  .then(() => 
    console.log(6);
  );

// 0
// 1
// 2
// 3
// 4
// 5
// 6

Node内的事件循环面试题

面试题一

async function async1() 
  console.log("async1 start");
  await async2();
  console.log("async1 end");


async function async2() 
  console.log("async2");


console.log("script start");

setTimeout(function () 
  console.log("setTimeout0");
, 0);

setTimeout(function () 
  console.log("setTimeout2");
, 300);

setImmediate(() => console.log("setImmediate"));

process.nextTick(() => console.log("nextTick1"));

async1();

process.nextTick(() => console.log("nextTick2"));

new Promise(function (resolve) 
  console.log("promise1");
  resolve();
  console.log("promise2");
).then(function () 
  console.log("promise3");
);

console.log("script end");

// script start
// async1 start
// async2
// promise1
// promise2
// script end
// nextTick1
// nextTick2
// async1 end
// promise3
// setTimeout0
// setImmediate
// setTimeout2