前端面试押题
  • HTML
    • 有哪些新标签?
    • SVG 的区别是什么?
    • 如何理解 HTML 中的语义化标签
  • CSS
    • 如何清除浮动?
    • CSS 选择器优先级如何确定?
    • BFC 是什么
    • 两种盒模型(box-sizing)的区别?
    • 如何实现垂直居中?
  • JavaScript 押题基础篇
    • new 做了什么?
    • JS 如何实现类?
    • JS 的闭包是什么?怎么用?
    • JS 如何实现继承?
    • JS 的立即执行函数是什么?
    • JS 的数据类型有哪些?
    • 原型链是什么?
    • 这段代码中的 this 是多少?
  • JavaScript 押题手写篇
    • 手写数组去重
    • 手写简化版 Promise
    • 手写 AJAX
    • 手写深拷贝
    • 手写节流 throttle、防抖 debounce
    • 手写发布订阅
    • 手写 Promise.all
  • DOM 押题
    • 请简述 DOM 事件模型
    • 手写可拖曳 div
    • 手写事件委托
  • HTTP 押题
    • 说说同源策略和跨域
    • POST 的区别有哪些?
    • TCP 三次握手和四次挥手是什么?
    • Session、Cookie、LocalStorage、SessionStorage 的区别
    • HTTP 缓存有哪些方案?
    • HTTPS 的区别有哪些?
    • HTTP/2 的区别有哪些?
  • React 押题
    • 什么是高阶组件 HOC?
    • React Hooks 如何模拟组件生命周期?
    • 你如何理解 Redux?
    • React 有哪些生命周期钩子函数?数据请求放在哪个钩子里?
    • React 如何实现组件间通信
    • 虚拟 DOM 的原理是什么?
    • Vue DOM diff 的区别?
    • DOM diff 算法是怎样的?
  • Node.js 押题
    • 浏览器里的微任务和任务是什么?
    • EventLoop 是什么?
    • koa.js 的区别是什么?
  • TypeScript 押题
    • JS 的区别是什么?有什么优势?
    • any、unknown、never 的区别是什么?
    • TS 工具类型 Partial、Required、Readonly、Exclude、Extract、Omit、ReturnType 的作用和实现?
    • interface 的区别是什么?
Powered by GitBook
On this page
  1. Node.js 押题

EventLoop 是什么?

背景知识

Node.js 将各种函数(也叫任务或回调)分成至少 6 类,按先后顺序调用,因此将时间分为六个阶段:

  1. timers 阶段(setTimeout)

  2. I/O callbacks 该阶段不用管

  3. idle, prepare 该阶段不用管

  4. poll 轮询阶段,停留时间最长,可以随时离开。

    1. 主要用来处理 I/O 事件,该阶段中 Node 会不停询问操作系统有没有文件数据、网络数据等

    2. 如果 Node 发现有 timer 快到时间了或者有 setImmediate 任务,就会主动离开 poll 阶段

  5. check 阶段,主要处理 setImmediate 任务

  6. close callback 该阶段不用管

Node.js 会不停的从 1 ~ 6 循环处理各种事件,这个过程叫做事件循环(Event Loop)。

nextTick

process.nextTick(fn) 的 fn 会在什么时候执行呢?

在 Node.js 11 之前,会在每个阶段的末尾集中执行(俗称队尾执行)。

在 Node.js 11 之后,会在每个阶段的任务间隙执行(俗称插队执行)。

浏览器跟 Node.js 11 之后的情况类似。可以用 window.queueMicrotask 模拟 nextTick。

Promise

Promise.resolve(1).then(fn) 的 fn 会在什么时候执行?

这要看 Promise 源码是如何实现的,一般都是用 process.nextTick(fn) 实现的,所以直接参考 nextTick。

async / await

这是 Promise 的语法糖,所以直接转为 Promise 写法即可。

面试题1:

setTimeout(() => {
  console.log('setTimeout')
})

setImmediate(() => {
  console.log('setImmediate')
})
// 在 Node.js 运行会输出什么?
// A setT setIm
// B setIm setT
// C 出错
// D A 或 B
// 在浏览器执行会怎样?

面试题2:

async function async1(){
    console.log('1')                   // 2
    async2().then(()=>{
      console.log('2')
    })
    
}
async function async2(){
    console.log('3')                   // 3
}
console.log('4')                        // 1
setTimeout(function(){
    console.log('5') 
},0)  
async1();
new Promise(function(resolve){
    console.log('6')                    // 4
    resolve();
}).then(function(){
    console.log('7')
})
console.log('8')                           // 5  
//4 1 3 6 8 2 7 5 
Previous浏览器里的微任务和任务是什么?Nextkoa.js 的区别是什么?

Last updated 3 years ago