广东亿讯科技前端开发一面面经

《面试题目》

1. 自我介绍。
2. 介绍项目。
3. 虚拟列表的原理是什么？列表项不定高时怎么处理？没有设置缓冲区导致白屏怎么解决？
4. 项目里的“前端身份模拟”是怎么实现的？
5. 路由守卫详细讲一下。
6. 不同页面之间的购物车数据同步是怎么实现的？短时间内有两个购物车操作，怎么保证数据是最新的？
7. 持久化 Token 过期后怎么处理？路由层又怎么配合？
8. 打字机效果是怎么实现的？
9. 后端返回的数据如果只到中间某一段，怎么判断数据是否返回完全？
10. 为什么使用 fetch-eventsource，而不是原生 EventSource？
11. “统一处理 Token 过期自动刷新”具体怎么做？
12. 你写接口异常捕获率达到 100%，做项目期间真的没有漏捕获的吗？
13. 项目里都是 React，为什么不用 Vue？
14. 你有用 Vue 写过完整项目吗？

《参考解析》

虚拟列表的核心是只渲染可视区域加缓冲区：监听滚动容器 scrollTop，用固定行高时直接算 start = floor(scrollTop / itemHeight)；不定高需要维护每项的测量高度和前缀和数组，渲染后用 ResizeObserver 回填真实高度并校正偏移。白屏通常来自缓冲区太小、滚动过快时新节点还没渲染，解决方式是上下各留若干项缓冲、用 transform 定位而不是改 top，并在数据未就绪时保留骨架占位。

购物车同步与 Token 刷新要落到一致性上：同一标签页用状态管理即可，多页面/多标签页用 storage 事件或 BroadcastChannel 同步，写操作带版本号或时间戳，冲突时以服务端返回为准；短时间连续操作要做请求合并或串行队列，避免旧响应覆盖新状态。Token 刷新用单例 Promise 锁住并发刷新，刷新成功后重放等待中的请求，失败则清理登录态并跳登录页；路由守卫在进入前校验，但真正的权限判断仍要以后端为准。

SSE 与流式渲染：原生 EventSource 只支持 GET、不能自定义请求头，所以需要 POST 或带鉴权头时用 fetch 加 ReadableStream 自己解析 data: 帧。判断数据是否完整不能靠“最后一段像不像结尾”，要在协议里带 id、event: done 或总长度/序号，客户端按序号拼接并校验，断线重连时带 Last-Event-ID 续传。打字机效果用定时器逐字追加，注意在组件卸载时清理定时器，流式场景下把增量渲染和 requestAnimationFrame 结合，避免每个分片都触发整页重排。