面试题总结--前端21问（近万字爆肝总结）

一起来看看这周前端21问你都会了嘛？😂😂😂

1. 事件循环机制你知道吗？

下面回答的思维导图如下，先预览一下思维导图

1. 浏览器中的 Event Loop

   如下图，在浏览器中js执行代码的顺序就是按照左边这个执行栈的顺序来执行，Event Loop会帮我们把不同的代码（任务）按照预先设定好的机制放入执行栈中。
   
   那预先设定的机制是什么样的呢？代码按什么先后顺序放进去呢？

   宏任务包括 script 、 setTimeout 、setInterval 、setImmediate 、I/O 及 UI rendering

   微任务包括 process.nextTick 、queueMicrotask、promise.then 、MutationObserver

   执行机制

   1. 首先执行宏任务（如script中的console.log）
   2. 然后执行该宏任务产生的微任务，若微任务在执行过程中产生了新的微任务，则继续执行微任务
   3. 微任务执行完毕后，再回到宏任务中进行下一轮循环（setTimeout 中的回调函数）

   搞懂这段代码的输出顺序，看看掌握情况

   console.log('script start')
   
   async function async1() {
   await async2()
   console.log('async1 end')
   }
   
   async function async2() {
   console.log('async2 end')
   }
   
   async1()
   
   setTimeout(function() {
   console.log('setTimeout')
   }, 0)
   
   new Promise(resolve => {
   console.log('Promise')
   resolve()
   })
   .then(function() {
   console.log('promise1')
   })
   
   console.log('script end')
   
   // script start => async2 end => Promise => script end
   
   // => async1 end => promise1 => setTimeout
   

   注意：

   新版的chrome浏览器优化了,await变得更快了,具体看下面的推荐文章。

2. Node 中的 Event Loop

   Node 的 Event Loop 分为 6 个阶段，它们会按照顺序反复运行。每当进入某一个阶段的时候，都会从对应的回调队列中取出函数去执行。当队列为空或者执行的回调函数数量到达系统设定的阈值，就会进入下一阶段。

   Node 的事件循环的执行顺序为

   输入数据阶段(incoming data)->轮询阶段(poll)->检查阶段(check)->关闭事件回调阶段(close callback)->定时器检测阶段(timers)->I/O事件回调阶段(I/O callbacks)->闲置阶段(idle, prepare)->轮询阶段…
   

   六个阶段

   • 定时器检测阶段(timers)：本阶段执行 timer 的回调，即 setTimeout、setInterval 里面的回调函数。
   • I/O事件回调阶段(I/O callbacks)：执行延迟到下一个循环迭代的 I/O 回调，即上一轮循环中未被执行的一些I/O回调。
   • 闲置阶段(idle, prepare)：仅系统内部使用。
   • 轮询阶段(poll)：检索新的 I/O 事件;执行与 I/O 相关的回调（几乎所有情况下，除了关闭的回调函数，那些由计时器和 setImmediate() 调度的之外），其余情况 node 将在适当的时候在此阻塞。
   • 检查阶段(check)：setImmediate() 回调函数在这里执行
   • 关闭事件回调阶段(close callback)：一些关闭的回调函数，如：socket.on(‘close’, …)

   特殊的process.nextTick

   这个函数其实是独立于 Event Loop 之外的，它有一个自己的队列，当每个阶段完成后，如果存在 nextTick 队列，就会清空队列中的所有回调函数，并且优先于其他 microtask 执行。

   看一个例子：

   setImmediate(() => {
       console.log('timeout1')
       Promise.resolve().then(() => console.log('promise resolve'))
       process.nextTick(() => console.log('next tick1'))
   });
   setImmediate(() => {
       console.log('timeout2')
       process.nextTick(() => console.log('next tick2'))
   });
   setImmediate(() => console.log('timeout3'));
   setImmediate(() => console.log('timeout4'));
   

   在 node11 之前，因为每一个 eventLoop 阶段完成后会去检查 nextTick 队列，如果里面有任务，会让这部分任务优先于微任务执行，因此上述代码是先进入 check 阶段，执行所有 setImmediate，完成之后执行 nextTick 队列，最后执行微任务队列，因此输出为timeout1=>timeout2=>timeout3=>timeout4=>next tick1=>next tick2=>promise resolve

   在 node11 之后，process.nextTick 是微任务的一种,因此上述代码是先进入 check 阶段，执行一个 setImmediate 宏任务，然后执行其微任务队列，再执行下一个宏任务及其微任务,因此输出为timeout1=>next tick1=>promise resolve=>timeout2=>next tick2=>timeout3=>timeout4

2. 防抖和节流你清楚吗？场景？手写？

这张图可以帮大家快速记忆，下面也有具体文字供大家阅读😀

1. 函数防抖(debounce)：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

   场景：输入框输入文字触发请求、调整浏览器窗口大小时resize、文本编辑器实时保存

   实现：

   function debounce(fn, wait) {
     let timer;
     return function () {
       let _this = this;
       let args = arguments;
       if (timer) {
         clearTimeout(timer);
       }
       timer = setTimeout(function () {
         fn.apply(_this, args);
       }, wait);
     };
   }
   

   特点：防抖重在清零 clearTimeout(timer)

2. 函数节流(throttle)：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

   场景：输入框输入文字触发请求、浏览器播放事件每隔一秒计算一次进度信息、scroll 事件每隔一秒计算一次位置信息等

   实现：

   function thorttle2(fn, wait) {
     let timer;
     return function () {
       let _this = this;
       let args = arguments;
   
       if (!ti