索菲亚前端开发二面面经

《面试题目》

1. 做 2~3 分钟自我介绍。
2. 详细说说实习经历，项目里主要做了什么、负责什么角色？
3. 用 SSE 做流式输出时，网络中途断连怎么实现断点续传？
4. SSE 自动重连后，多个任务同时回答，怎么定位重连返回的数据属于当前任务？
5. 大量流式分片过来，频繁更新 DOM 造成页面卡顿，怎么解决？
6. 中台系统的权限和 Token 鉴权是怎么设计的？
7. 接口请求的 token 过期了怎么处理？
8. XX 机台是单独的 SPA，用什么方式内嵌到 AI 中台里？
9. 设计一个弹窗组件，支持自定义标题、内容、底部多个按钮，怎么设计组件 API？
10. 同一个页面 PC 端显示 4 列卡片、移动端显示 1 列，怎么实现响应式适配？
11. 移动端卡片列表滑动到底部自动加载下一页，怎么实现？
12. 无限滚动场景下，怎么防止短时间内连续多次触发请求？
13. 怎么判断列表是否已经是最后一页、没有更多数据？
14. 页面并行请求 3 个接口，成功的数据优先渲染，单个接口失败不影响其他数据展示，怎么实现？
15. Promise.all、Promise.allSettled、Promise.race 有什么区别？
16. 页面刚打开不卡顿，使用一段时间后逐渐变卡，怎么排查？
17. 领导分配任务很多、时间很紧、项目眼看要延期，你会怎么做？
18. 和同事对技术方案有分歧，你会怎么处理？
19. 我们的开发以业务型为主，重复性的页面搭建、数据处理比较多，你能接受吗？

《参考解析》

SSE 断点续传要在协议里带任务 ID、消息序号和结束标记，客户端记录最后收到的序号，重连时带 Last-Event-ID 或查询参数；服务端按任务缓存已发送内容，从断点继续。多任务并发时用任务 ID 区分事件流，前端按 ID 路由到对应消息列表，不能只靠全局连接。

流式渲染卡顿用批量更新和虚拟列表：把分片先放进缓冲区，按 requestAnimationFrame 或固定时间窗合并渲染，避免每个 token 都触发 React 重渲染；长列表只渲染可视区域。权限和 Token 用路由守卫 + 请求拦截器，刷新 Token 用单例锁防止并发，失败清理登录态。

组件与布局：弹窗 API 可以设计成 title、content、footer 插槽或 actions 数组、visible、onCancel/onConfirm，内部用 Portal 挂到 body，处理焦点锁定、ESC 关闭和滚动锁。响应式用 CSS Grid repeat(auto-fit, minmax(...)) 或媒体查询。无限滚动用 IntersectionObserver 监听哨兵，加 loading 和 hasMore 状态防重入，用游标或页码判断结束。

并行请求用 Promise.allSettled，每个请求独立 then 渲染成功数据，失败显示局部错误；Promise.all 一失败全失败，race 取最先完成。页面越用越卡，查内存泄漏（未清理的定时器/监听器/闭包）、DOM 节点增长、事件监听重复绑定、缓存无上限和长任务，用 Performance 面板和内存快照定位。