耀狄科技全栈实习一面 弱网排查与 SSE 续传

《面试题目》

1. 自我介绍。
2. 介绍实习所做的工作。
3. 你提到弱网环境，怎么排查项目在弱网环境下的性能？怎么优化？
4. 平时自己的开发流程是怎么样的？
5. 怎么结合 AI 辅助开发提效？
6. 了解 Next.js 吗？
7. 讲解一下你对 Vue3 的理解。
8. Vue 和 React 有什么区别？
9. 介绍一下项目经历。
10. 讲解一下 Subagent 怎么进行通信。
11. 讲解一下怎么给项目接入 AI 服务？
12. 为什么 AI 服务要用 SSE？SSE 有什么特点？
13. 如果一次对话流程中，网络波动导致对话中断，怎么续上？

《参考解析》

弱网性能的排查与优化：排查先用工具的「弱网模拟」复现，Chrome DevTools 的 Network 面板可以直接切 Slow 3G/Fast 3G 并设置自定义延迟与丢包，也可以用 Charles 或 tc/netem 做更真实的丢包与抖动。定位靠 Resource Timing API 与 PerformanceObserver 采集每段耗时（DNS、TCP、TLS、TTFB、内容下载），把「慢」拆成服务端慢还是传输慢。优化分几类：减小传输量（代码分割与按需加载、路由级懒加载、图片 WebP/AVIF 加 srcset、开启 gzip/brotli、剔除无用依赖、公共库走 CDN 且长缓存）、减少请求数（接口聚合、HTTP/2 多路复用、预加载关键资源 preload/prefetch）、提升感知速度（骨架屏、乐观更新、先渲染缓存数据再校正）、提高弱网鲁棒性（请求超时与指数退避重试、失败降级到本地缓存、幂等接口才自动重试、Service Worker 缓存静态资源、断网提示与恢复后续传）。要给出具体数字，比如首屏 JS 从 1.2MB 降到 380KB、Slow 3G 下可交互时间从 12s 降到 4s。

SSE 的特点与为什么选它：SSE（Server-Sent Events）基于普通 HTTP 长连接，Content-Type 是 text/event-stream，服务端单向持续推送文本，客户端用 EventSource 接收；它自带断线重连，浏览器会在连接断开后按 retry 字段（默认约 3 秒）自动重连，并带上 Last-Event-ID 头，服务端可据此从断点续推。相比 WebSocket：SSE 是单向的、协议简单、走 HTTP 因而天然兼容现有网关、鉴权、压缩和 CDN，实现成本低；WebSocket 是全双工，需要协议升级和独立的心跳/重连逻辑，运维上更重。大模型流式输出只需要「服务端持续吐 token」，所以选 SSE 更合适。容易踩的点：HTTP/1.1 下同域名并发连接数有限（通常 6 个），多标签页会互相挤占，所以长连接应走 HTTP/2；中间有 Nginx 等代理时要关掉响应缓冲（proxy_buffering off、X-Accel-Buffering: no），否则会攒够一整块才下发、流式变批量；还要发心跳注释行防代理超时断连。

对话中断怎么续上：分前后端两侧设计。前端要记录已经消费到的位置——给每条消息分配自增序号或消息 id，把已渲染的内容和序号持久化到内存或 localStorage，断开时展示「连接中断，正在重连」并用指数退避重连，重连成功后带上最后收到的 id（Last-Event-ID 或自定义参数）。服务端收到续传请求后有两种策略：一是生成仍在进行中，就直接从断点继续推剩余的 token（要求生成任务与连接解耦，比如生成跑在独立任务里、把 token 追加写入 Redis Stream 或消息队列，重连相当于换一个消费者）；二是生成已结束或无法续推，就返回已落库的完整消息并标记结束。无论哪种，都要保证幂等——同一条消息重复推送时前端按 id 去重，数据库写入用唯一键避免重复落库。此外要设一个「无进度超时」：超过 N 秒没有新 token 就判连接死亡，避免前端一直卡在 loading。