全栈面试题总结-十四道大厂

防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。

想要了解一个概念，必先了解概念所应用的场景。在 JS 这个世界中，有哪些防抖的场景呢

1. 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
2. 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
3. 文本编辑器实时保存，当无任何更改操作一秒后进行保存

代码如下，可以看出来 防抖重在清零 clearTimeout(timer)

function debounce (f, wait) {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      f(...args)
    }, wait)
  }
}
复制代码

节流 (throttle)

节流，顾名思义，控制水的流量。控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。

scroll

代码如下，可以看出来 节流重在加锁 timer=timeout

function throttle (f, wait) {
  let timer
  return (...args) => {
    if (timer) { return }
    timer = setTimeout(() => {
      f(...args)
      timer = null
    }, wait)
  }
}
复制代码

总结 (简要答案)

• 防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。 代码实现重在清零 clearTimeout 。防抖可以比作等电梯，只要有一个人进来，就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。
• 节流：控制流量，单位时间内事件只能触发一次，与服务器端的限流 (Rate Limit) 类似。 代码实现重在开锁关锁 timer=timeout; timer=null 。节流可以比作过红绿灯，每等一个红灯时间就可以过一批。

02 在前端开发中，如何获取浏览器的唯一标识

更多描述: 如何获取浏览器的唯一标识，原理是什么

在 Issue 中交流与讨论: 02 在前端开发中，如何获取浏览器的唯一标识

由于不同的系统显卡绘制 canvas 时渲染参数、抗锯齿等算法不同，因此绘制成图片数据的 CRC 校验也不一样。

function getCanvasFp () {
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  ctx.font = '14px Arial'
  ctx.fillStyle = '#ccc'
  ctx.fillText('hello, shanyue', 2, 2)
  return canvas.toDataURL('image/jpeg')
}
复制代码

因此根据 canvas 可以获取浏览器指纹信息。

1. 绘制 canvas ，获取 base64 的 dataurl
2. 对 dataurl 这个字符串进行 md5 摘要计算，得到指纹信息

但是对于常见的需求就有成熟的解决方案，若在生产环境使用，可以使用以下库

• fingerprintjs2

它依据以下信息，获取到浏览器指纹信息， 而这些信息，则成为 component

canvas
webgl
UserAgent
AudioContext

requestIdleCallback(function () {
  Fingerprint2.get((components) => {
    const values = components.map((component) => component.value)
    const fp = Fingerprint2.x64hash128(values.join(''), 31)
  })
})
复制代码

在 fingerprintjs2 中，对于 component 也有分类

• browser independent component ：有些 component 同一设备跨浏览器也可以得到相同的值，有些独立浏览器，得到不同的值
• stable component : 有些 component 刷新后值就会发生变化，称为不稳定组件

在实际业务中，可根据业务选择合适的组件

const options = {
  excludes: {userAgent: true, language: true}
}
复制代码

简答

根据 canvas 可以获取浏览器指纹信息

1. 绘制 canvas ，获取 base64 的 dataurl
2. 对 dataurl 这个字符串进行 md5 摘要计算，得到指纹信息

若在生产环境使用，可以使用 fingerprintjs2 ，根据业务需求，如单设备是否可跨浏览器，以此选择合适的 component

03 在服务端应用中如何获得客户端 IP

在 Issue 中交流与讨论: