商汤科技 一面 前端实习生

15分钟阅读

JD：

岗位职责： 1.负责快速实现基于大模型的各种ToC产品，优化Wb前端交互体验； 2.分析瓶颈，解决各种技术难题，并对前端进行性能调优，提高系统效率； 3.深入发掘和分析业务需求，理解的逻辑，以便对现有产品和系统进行改进和优化； 4.进行技术预研和技术难点攻关，确保系统的可用性、稳定性和可扩展性 任职要求： 精通HTML5/CSS3,能够按照设计稿精确还原Ui， 熟悉响应式布局(Flex、Grid等)； 精通JavaScript(ES6+),具备扎实的原生JS基础； 熟练掌握React、.Vue框架及其周边生态，如Redux、Vuex、Pinia、React Query等； 熟练使用TypeScript进行前端开发，提升代码的可维护性； 熟悉uniapp、Electron,能够进行跨端应用开发； 了解前端模块化、组件化、工程化相关技术，如Webpack、Vite、Rollup; 熟悉Web性能优化（首屏优化、懒加载、代码拆分、SSR/CSR等)； 熟悉Web安全(XSS、CSRF、CORS、SQL注入等防范措施)； 熟悉前端状态管理方案，如Redux、MobX、Vuex、Pinia等； 熟悉前端测试(Jest、Cypress、Vitest等)； 熟悉前端并发编程、异步编程(Promise、Async/Await、Event Loop); 了解前端微服务（如Module Federation)、Serverless技术； 加分项（以下能力可加分）： 有WebGL、Canvas开发经验者优先； 有Three.js、Babylon.js3D可视化开发经验者优先； 有低代码平台、可视化搭建经验者优先； 有移动端Hybrid、小程序开发经验者优先；

有大规模前端项目架构经验*（如Monorepo、微前端等）者优先； 有开源项目贡献经验或技术博客者优先

当前简历：前端简历 - v1.2.0

这场面试可能的问题

1. 开场与简历深挖

  1. 你先用 2 分钟介绍一下自己，重点讲讲你为什么适合商汤这个大模型 ToC 产品前端实习岗位。
  2. 你在用友做的废钢判级平台，业务链路听起来比较复杂。你在其中最核心的前端贡献是什么？
  3. 你提到用 Claude Code/Codex 结合 DESIGN.md 快速生成原型，这套流程具体怎么落地？怎么保证生成结果符合业务与设计要求？
  4. 你的简历里有 AI 角色对话、Agent 靶场、大屏、自助终端等经历。哪一个项目最能体现你的工程能力？为什么？
  5. 商汤的岗位强调“快速实现基于大模型的 ToC 产品”，你觉得 ToC AI 产品前端和传统后台管理系统前端最大的差异是什么？

2. React / TypeScript / 状态管理

  1. 你在元点引擎里用了 TanStack Query、Zustand 和 react-virtuoso。分别解决什么问题？边界怎么划分？
  2. TanStack Query 的 staleTime、cacheTime/gcTime、queryKey 设计分别会影响什么？你在分页场景里怎么设计 queryKey？
  3. Zustand 和 Redux 相比有什么优势和风险？如果状态越来越复杂，你会怎么组织 store？
  4. React Context 和 Zustand 都能做全局状态，你在动态主题系统里为什么选择 Context？哪些状态不适合放 Context？
  5. React 组件重新渲染的触发条件有哪些？你会如何定位一个列表页频繁 re-render 的问题？
  6. 讲一下 React Fiber 解决了什么问题。它和虚拟 DOM 是什么关系？
  7. 你在 TypeScript 里如何设计接口返回类型？OpenAPI + Orval 生成的类型在前端工程里有什么收益和潜在问题？
  8. 如果后端接口字段频繁变化，除了 Orval 自动生成类型，你还会加哪些运行时兜底？

3. 长列表、分页与性能优化

  1. 你提到“万量级数据下无感知滚动体验”，react-virtuoso 的核心原理是什么？和普通无限滚动有什么区别？
  2. 上拉加载历史消息时，为什么会出现滚动跳动？你具体是如何保持滚动位置稳定的？
  3. 消息乱序和异步回写竞态是怎么产生的？你如何保证消息顺序和 UI 一致性？
  4. 你首页性能优化里“降低 80%+ 冗余请求、首屏提速 40%”是怎么测量的？指标口径是什么？
  5. 防抖 Hook 怎么写？如何避免闭包拿到旧值？组件卸载时如何清理定时器？
  6. “哨兵检测”加载更多的原理是什么？Intersection Observer API 有哪些边界问题？
  7. 响应式瀑布流如何实现？如果图片高度未知，如何减少布局抖动？
  8. 商汤 JD 提到首屏优化、懒加载、代码拆分、SSR/CSR。你会如何为一个 AI 对话产品做首屏优化？
  9. 如果线上用户反馈 AI 对话页越聊越卡，你会从哪些维度排查？

4. WebSocket / SSE / 实时通信

  1. 你在用友项目里做了基于 WebSocket 的多步骤流程状态机。为什么这个场景适合 WebSocket，而不是轮询或 SSE？
  2. 你的状态机有哪些状态？状态迁移如何设计？异常、重连、重复消息怎么处理？
  3. WebSocket 心跳重连怎么做？如何避免断线后重复订阅或消息乱序？
  4. 你做的视频播放链路使用 WebSocket + MSE。MSE 的基本工作流程是什么？
  5. 海康 SDK 链路和 WebSocket + MSE 链路分别适合什么场景？兼容性问题怎么处理？
  6. AgentCTF 里你设计了 EventSource GET + fetch ReadableStream POST 双模式 SSE。为什么标准 SSE 只能 GET？POST 流式读取怎么解析？
  7. SSE、WebSocket、HTTP streaming 的差异是什么？如果商汤的 AI 产品要流式输出大模型回答，你会选哪种方案？
  8. 流式输出时，如果中途网络断开，前端如何恢复 UI 状态？是否需要消息幂等 ID？

5. JavaScript 基础与异步编程

  1. 解释一下事件循环。宏任务、微任务、渲染时机之间是什么关系？
  2. Promise.then、setTimeout、requestAnimationFrame 的执行顺序分别受什么影响？
  3. async/await 的错误处理有哪些方式？在并发请求里如何做部分失败兜底？
  4. 闭包是什么？防抖、节流、React Hook 里分别哪里用到了闭包？
  5. 原型链和 class 的关系是什么？this 绑定常见丢失场景有哪些？
  6. 如果一个搜索框输入很快，同时后端返回顺序不稳定，前端如何避免旧请求覆盖新结果？
  7. AbortController 可以解决什么问题？和防抖相比边界有什么不同？

6. CSS / UI 还原 / 响应式布局

  1. JD 要求能按照设计稿精确还原 UI。你平时如何保证还原度？会关注哪些细节？
  2. Flex 和 Grid 的适用场景分别是什么？两栏自适应布局你会怎么写？
  3. 如何实现一个响应式卡片瀑布流？CSS columns、Grid masonry、JS 计算各有什么优缺点？
  4. 解释 BFC。它能解决哪些布局问题？
  5. 移动端适配常见方案有哪些？rem、vw、媒体查询分别适合什么场景？
  6. FOUC 闪烁为什么会发生？你的动态主题系统怎么通过预加载和 CSS 变量避免它？
  7. CSS 变量和预处理器变量有什么区别？为什么 CSS 变量适合运行时主题切换？

7. 工程化 / 架构 / 跨端

  1. Vite 和 Webpack 的核心差异是什么？为什么 Vite 开发环境更快？
  2. Rollup 更适合什么场景？组件库打包时你会关注哪些输出格式？
  3. Monorepo 适合解决什么问题？如果一个 AI ToC 产品包含 Web、管理后台、组件库，你会如何拆包？
  4. Module Federation 的原理是什么？它和普通 npm 包复用有什么区别？
  5. 你熟悉 Electron。Electron 的主进程、渲染进程、预加载脚本分别做什么？
  6. Electron 如何保证安全？为什么不建议在渲染进程直接开启 Node 能力？
  7. uniapp 或小程序和 Web 开发在路由、生命周期、包体积限制上有什么差异？
  8. 你用过 Docker、GitLab CI/CD。前端项目 CI 一般会包含哪些步骤？如何做构建产物回滚？

8. Web 安全与稳定性

  1. XSS 有哪些类型？React 默认做了哪些防护？哪些情况下仍然会有 XSS 风险？
  2. CSRF 的攻击原理是什么？SameSite Cookie、Token 校验分别怎么防？
  3. CORS 是浏览器限制还是服务端限制？简单请求和预检请求有什么区别？
  4. JD 提到 SQL 注入，虽然它偏后端，但前端能做什么输入处理？为什么不能只靠前端防护？
  5. Token 持久化放 localStorage、sessionStorage、Cookie 各有什么安全取舍？
  6. 你的路由鉴权体系如何处理刷新、过期、并发跳转和权限变化？
  7. 前端异常监控你会采集哪些信息？如何避免上报敏感数据？

9. 前端测试

  1. Jest/Vitest 适合测什么？Cypress/Playwright 适合测什么？
  2. 对一个防抖搜索 Hook，你会怎么写单元测试？需要 fake timer 吗？
  3. 对 AI 流式对话页面，你会怎么做端到端测试？如何 mock 流式响应？
  4. 对状态机这种复杂流程，你会如何设计测试用例覆盖正常流、异常流和重连流？
  5. 如果一个虚拟列表组件在测试环境没有真实布局高度，你会怎么处理？

10. 大模型 ToC 产品场景题

  1. 如果让你从 0 到 1 做一个类 ChatGPT 的 Web 对话页，你会如何拆组件、拆状态、拆接口？
  2. 大模型回答是流式返回的，用户可以中途停止生成、重新生成、编辑上一轮问题，你会如何设计前端状态？
  3. 如果回答里包含 Markdown、代码块、表格、图片，你会如何保证渲染性能和安全性？
  4. 如果用户频繁切换会话，如何避免请求串线和 UI 显示错乱？
  5. 如果需要支持移动端、桌面端和 Electron 客户端，你会如何抽象公共能力？
  6. 如果大模型生成内容很长，如何做增量渲染、自动滚动和用户手动滚动之间的协调？
  7. 如果一个 ToC AI 产品突然流量暴涨，前端侧有哪些降级策略？

11. 算法与手写题

  1. 手写 debounce，要求支持立即执行、取消和保留最新参数。
  2. 手写 throttle，说明时间戳版和定时器版差异。
  3. 手写 Promise.all，要求处理非 Promise 值和失败短路。
  4. 手写一个并发请求控制器：最多同时执行 limit 个任务，全部完成后返回结果。
  5. 给定有序消息流和本地临时消息，如何按时间和消息 ID 合并去重？
  6. LeetCode：无重复字符的最长子串。
  7. LeetCode：合并区间。
  8. LeetCode：二叉树层序遍历。
  9. LeetCode：岛屿数量。
  10. LeetCode：LRU 缓存。

12. 反问面试官

  1. 这个岗位主要参与商汤哪一类大模型 ToC 产品？偏增长、工具、内容生产，还是多模态交互？
  2. 团队当前前端技术栈更偏 React 还是 Vue？实习生会参与核心链路还是外围需求？
  3. 当前产品在前端性能、稳定性或跨端一致性上最大的挑战是什么？
  4. 团队如何评估实习生的产出？是否有转正机会和明确标准？

没回答上的问题

如何判断一个对象是一个空对象： obj.keys().length =0 for in 配合 Object.hasOwnProperty 看看是否有枚举出来的属性，如果有就不是 JSON.stringify(obj) === '{}' useRef 修改是同步的吗，useRef 放在 useEffect的依赖数组当中会不会有效

是同步的，不会有效，因为比较的时候是浅比较，ref 本身是一个对象，浅比较对象不会察觉变化