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；图片进入页面才加载怎么实现 我回答 IntersectionObserverM；如果页面中的按钮突然加载出来，把图片顶到下面去了，那用户刚好点击了这个怎么办？我觉得需要有骨架屏把图片的占据位置就固定的，不可以频繁的变化，这样子引起的重绘太多，# 7.Echarts 图表渲染如果后端返回的数据有很多的小数点很精确该怎么渲染呢# 8.Nextjs 的服务端组件和客户端组件渲染的区别SSR 的渲染和 CSR 的区别水合脚本 js 静态页面--》动态页面服务端组件的限制 这个没回答出来面试官很失望。# 9.介绍 TS 的泛型解决的问题没回答出来interface 和 type 的使用上的区别# 10.在移动端 CSS 如何实现特别小的字体比标准字体更小# 11.算法题：计算字符串中回文子串的数量我回答的是二维 dp 数组实现动态规划的状态转移，面试官说可以只使用一个指针，然后以这个指针为中心去遍历两边对称的回文子串 ，这样子空间复杂度优化了，同时也只需要一个指针。状态转移方程 我的复杂度是 O(n2)总结：凭什么我反问面试官的都是开放性问题，我下次直接拿面试题问他，shame！。

### 上午 深圳独角兽公司 AI 应用monorepo 是针对多模块依赖的，请问项目里都有哪些包？组件的封装与复用AI 回答的 SSE 流式传输实现打字机效果，讲一讲完整的流程（而不是 websocket 流式传输）虚拟列表怎么回答出花Webpack 和 Vite 的构建优化手段分别讲一讲。### 下午 Vibe.us如何用 CSS 实现一个三角形？你一般使用 CSS 去实现什么动态效果呢？interface 和 type 的区别如何封装一个表单的组件 暴露哪些属性？fetch ajax 和 axios 的差别Nextjs 使用 SSR 为什么能够首屏加载速度？你是如何实现页面性能的优化的？从哪些方面入手？你是如何实现的断点续传的？虚拟列表的实现原理讲讲。

可以问你觉得程序员最好的出路是啥吗

这家公司是做 人工智能换脸的项目的，包括 ai 面试官。2.对异步编程的理解。阐述一下吧。3.导出 Excel 的话怎么优化导出导致内存爆掉！请你描述一下完整的流程！解释：Excel 数据处理优化：使用 SheetJS（xlsx） 实现万级数据的导入导出，配合 Web Worker 后台线程处理大文件解析，避免主线程阻塞；导出 2 万条数据耗时从 15s 降至 3s，UI 无卡顿。听我自己面试得急死。。。。我自己说话好慢呐。。。 面试官说话好快呀。4.你说一下 webworker 使用的几个限制条件。以下是 Web Worker 的主要限制及技术细节分析： 一、核心功能限制 DOM 操作禁止 ...

1. 虚拟列表与防抖搜索• 虚拟列表用于防止一次性加载所有数据，仅展示当前窗口可见的数据。• 防抖搜索在用户停止输入后发送请求，避免频繁请求。• 结合场景：滚动频繁时可采用节流（限制请求频率）或防抖（延迟请求）。2. 防抖与节流的区别• 防抖：等待用户停止操作后触发（如密码强度校验）。• 节流：固定时间间隔内限制请求次数（如滚动事件）。3. 分页设计• 后端处理分页逻辑，前端懒加载非首页数据。• 用户触发滚动时再请求后续分页数据。4. 前端监控指标（B端管理系统）• 采集指标：日访问量、停留时长、用户高峰时段、操作路径。• 首屏加载时间：区分关键内容加载（FCP）和完全加载（LCP）。5. 流式Markdown渲染• 通过WebSocket接收分片数据，合并后统一渲染。• 挑战：避免格式跳变（如标题层级错误），需合并分片并校验格式完整性。后端发送过来的分片数据，第一个分片是####吗？6. 大文件上传优化• 分片上传流程：计算MD5、并发传输、分片校验与重传。• 超大文件（1G+）改进：使用WebWorker或异步库分片，提升分片效率。7. 代码考核• 题目涉及：链表反转、最长公共前缀、二叉树遍历（如验证二叉搜索树）。• 要求现场编码验证实现逻辑。

面经分享：15min1. sql题，left join的使用啊，为什么不适用right join呢？，请问两者的性能（左表更大？）结果有什么区别呢，笛卡尔积 是怎么体现的。，2. 引入 Druid 连接池来监控慢 SQL，批量导入 5 万题期间共拦截 21 条>1 s 语句；调大 maxActive 至 120 并加组合索引后，接口总耗时由 210 s 降至 23 s，慢 SQL 降为 0 条。   我是傻逼。。。 问我批量导入怎么解决的慢sql，具体流程说一下。。。shi3. Redis的三大问题：缓存击穿的解决办法（我忘记了。）4. Redis的Bitmap是什么？5. 你做了一个秒杀系统，这不是很复杂吗？我说这是一个”学习项目“，于是没有多问。。完全不感兴趣了。6. 你的知识库使用的是ES，为什么不使用向量数据库Faiss，请问ES支持向量检索和向量索引吗？使用到什么向量索引了？你具体是怎么条用的？怎么提取出topK的？7. 消息队列在Kafka和RabbitMQ中的抉择。

真难呀，难于上青天，等待是最痛苦的，被筛选是最折磨人的，面试还是要摆正心态才可以持久战呀，不然到后面都 心态饿死了