字节飞书前端二面

字节飞书前端二面二面已过，base广州求合租！！

时长 52min

自我介绍
聊聊你学习过程中觉得有哪些收获，感觉很不错的地方
上一问提到了学习框架，然后开始问我关于 Vue 中有没有什么优化的地方
说了一个关于 Watcher 的优化，防止重复加入 Watcher 重复执行回调 (忘了可以说虚拟 DOM 呆，因为一开始也说了减少 DOM 操作，没有 GET 到面试官)
场景题，二维码登录，问具体逻辑
基于二维码登录有没有什么可以健壮整个登录系统的地方
一开始说了恶意请求攻击，然后讲讲怎么防止
又问我还有没有其他的，边引导我，接着就是说了些关于前后端交互，多次显示二维码方面的优化

之前没有做过二维码登录，关于三端之间的交互逻辑了解的也不是非常多，答的不好，面试官也没多

为难我，大体聊了十几 min 这里。

后来复盘看了下相关的逻辑，二维码登录不仅可以从恶意请求攻击方面优化。还有 PC 端的二维码过期时的二维码刷新，二维码刷新可以考虑用户

体验又或是服务器压力，每隔一段时间自动刷新会对服务器造成额外的压力，可以通过在移动端提示二维码失效告诉用户请重新刷新二维码的方式

让用户手动点击刷新按钮进行刷新，这样也可以减少二维码图片的请求。另外二维码的图片也可以不在服务器生成，pc 端可以向服务器请求一个二维码的信息，

比如 附带二维码唯一 id 的完整的访问链接 或者 只是一个二维码的 id 及特定参数，特定参数可以包括二维码过期时间等，然后在 PC 端由一些库依据二维码 id 或完整的访问链接生成二维码，这样也可以减少请求和响应的报文的体积。

当然这些也都能由服务器生成，这样 PC 端部分只需要负责展示二维码，刷新二维码，轮询 / 接收服务器推送二维码的状态即可。

移动端则扫描二维码从中提取出二维码的 id / 访问链接，再调用服务端提供的 api 将是否确认登陆的状态以及二维码的唯一标识发送给服务端，

这样服务端便可以通过这些信息改变用户的登录态，以及二维码的状态 (待扫码 / 已扫码 / 已确认 / 已超时过期失效)。

这部分的优化还是挺多的，只是自己了解的太少了，平时业务接触的太少了，后续重写项目时可以借鉴相应的思想。

参考资料：

扫码登录

二维码扫描登录的原理
从输入一个 URL 到浏览器显示整个过程 (没有全部讲完，边将边往深的挖)
DNS 解析过程
HTTPS 握手过程，这部分和中间人攻击讲的不是很好有点忘了
中间人攻击
做题
LRU 缓存策略，set & get 方法，set 添加对象 {id, object} ，每个对象有一个 x 的过期时间，过期了自动删除，

set & get 可以更新过期时间，并且缓存有最大容量，当缓存中的对象数超过最大容量后，删除最久没有

get & set 的对象。

关于这题忘记了 hashmap 的特性，面试官问 map 是不是有序的，这个是有序的，因为 hashmap 会记录这个 不存在的键值对 set 时的顺序
而在 set 完之后，之后每次 set 不会更新它的顺序，而 LRU 缓存是最近最久未使用，所以在每次 get & set 时需要 delete
在 map 上的相应的键，然后再 set 回去，这样优先级就更新了。还有就是关于 x 时间后过期，一开始想着在每次 set 的时候添加这个键
值对的存活时间，并在之后 get 时判断一下是否过期，实际上这并没有满足 x 时间后过期。之后改成了 setTimeout ，可能是因为大脑太乱
了吧，如果用 setTimeout 可能会涉及到内存泄漏的问题，这方面也需要处理很多，也没有写好，之后差不多就过了。

class Cache {
  constructor(n) {
    this.cache = new Map();
    this.timers = new Map();
    this.size = n;
    this.lifetime = 1000;
  }

  get (id) {
    if (!this.cache.has(id)) return null; // 不存在了直接返回

    const object = this.cache.get(id);     // 拿到旧的 object

    clearTimeout(this.timers.get(id));     // 存在，删除旧的

    this.cache.delete(id);                // 存在，删除旧的

    this.setTimer(id, this.lifetime);     // 从新设置定时器

    this.cache.set(id, object);            // 往缓存中重新添加

    return object;
  }

  set (id, object) {
    if (this.cache.has(id)) {
      clearTimeout(this.timers.get(id)); // 删除旧的
      this.cache.delete(id);            // 删除旧的
    }


    this.cache.set(id, object);     // 设置新的
    this.setTimer(id, this.lifetime); // 设置新的

    if (this.cache.size > this.size) {      // 超出了最大容量
      const _id = this.cache.keys().next().value;
      clearTimeout(this.timers.get(_id));  // 删除旧的
      this.cache.delete(_id);             // 删除头部移除的对象
    }
  }

  setTimer (id, lifetime) {
    this.timers.set(id, setTimeout(() => {
      this.cache.delete(id);
    }, lifetime))
  }

}

发布订阅
最长无重复子串
反问

后面两题基本没什么问题，最长无重复子串一开始想叉了调试了几次，做出来了。整个面试过程中面试官会不断的引导我去扩展自己的思维，特别是关于
二维码登录的这个应用场景。另外关于 LRU 缓存+自动过期这题感觉也是与前面计网问的知识有关的(在说 DNS 解析时，提到了域名服务器缓存中的域名-ip 的映射以及高速缓存)
可能面试官是由我的回答来出的这题？？也有可能是我多想了叭，面试的时候真的没有 GET 到。

整个二面面试体验还是很 nice 的，面试官喜欢笑整个面试的氛围就不会很紧张。出的题也挺有意思的，从二维码登录这个场景题可以发现自己的不足(确实太菜了)，
还是要多多接触一些业务相关的，将理论知识应用到实际才是硬道理。

字节飞书前端二面

字节飞书前端二面 二面已过，base广州求合租！！

全站热榜

创作者周榜

字节飞书前端二面二面已过，base广州求合租！！