深圳锐明技术前端面经

12.25 深圳锐明技术 面试：

标记：M 面试官 W 我

## 1.场景题：对一个考生的答题应用场景，如何避免考生同时打开两个页面的错误？

W；回答使用布尔值，存储在 localStorage，M；存储本地还是后端数据库呢？怎么拦截用户打开新的页面呢？W；当用户结束答题的时候改为 false，M；但是如果断网了，或者直接关闭了浏览器，那么布尔值没有按照正常的逻辑被修改怎么办？W；在服务端判断用户端的网络状况，如果断网了或者关闭了浏览器 及时修改布尔值 但是应该不行？

我现在的想法是使用 Websocket 退出会话就代表会话结束了

# 2.场景题：虚拟滚动的核心原理

W；数值计算： ViewHeight scrollHeight 每行数据的高度 height

前端计算 startId 和 limit 然后发送请求

IntersectionObserver 的浏览器 API M；面试官对这个提出疑问，说什么得提前渲染节点

M；如果行高不唯一呢？如何兼容行高不固定的场景。

W；我回答使用哈希表来记录

M；用户准备从虚拟列表的第一页切换到第二页了，但是有人在后台中新增了两个数据添加在虚拟列表的最开始，那么原先的第二页需要展示 10-20 对应的数据，但是现在可能展示的是原先的 8-18 对应的数据，那么用户已经在第一页浏览过这个数据了，请问如何优化用户的体验呢？

W；虚拟滚动本身就有缓存区会缓存 DOM 节点。。

# 3.Canvas 和 SVG 的区别

W；不太清楚

# 4.JWT 的 token 登录逻辑

W；refresh-token / access-token 存储位置 安全防范 过期时长

请求和响应拦截器 返回 401 错误 无感刷新 token 的实现 使用 isRefeshing 标记来避免重复调用刷新 token 的接口

M；多标签页怎么构建请求队列，第二个标签页怎么监听到第一个标签页的 token 已经刷新完了呢？我感到很疑惑，面试官说两个标签页的内存是不共享的，那么请求队列使用的也不是一个内存里的变量，第二个页面不知道第一个页面的 token 是否刷新成功？内存不是跨标签页的？？？我感到很疑惑。

# 5.Vue 和 React 中的遍历 v-for 为什么需要 key 这个关键字

M；手写三个 div 为啥不需要 key 但是使用遍历就需要 key 呢？

# 6.图片懒加载

M；图片进入页面才加载怎么实现 我回答 IntersectionObserver

M；如果页面中的按钮突然加载出来，把图片顶到下面去了，那用户刚好点击了这个怎么办？

我觉得需要有骨架屏把图片的占据位置就固定的，不可以频繁的变化，这样子引起的重绘太多，

# 7.Echarts 图表渲染

如果后端返回的数据有很多的小数点很精确该怎么渲染呢

# 8.Nextjs 的服务端组件和客户端组件渲染的区别

SSR 的渲染和 CSR 的区别

水合脚本 js 静态页面--》动态页面

服务端组件的限制 这个没回答出来面试官很失望。

# 9.介绍 TS 的泛型解决的问题

没回答出来

interface 和 type 的使用上的区别

# 10.在移动端 CSS 如何实现特别小的字体

比标准字体更小

# 11.算法题：计算字符串中回文子串的数量

我回答的是二维 dp 数组实现动态规划的状态转移，

面试官说可以只使用一个指针，然后以这个指针为中心去遍历两边对称的回文子串 ，这样子空间复杂度优化了，同时也只需要一个指针。

状态转移方程 我的复杂度是 O(n2)

总结：

凭什么我反问面试官的都是开放性问题，我下次直接拿面试题问他，shame！。