文章目录

Shopee前端日常一面(30min)整理笔记(四十)

1. 图片上传的前后端逻辑怎么做(流程、图片传输形式与编码解码)

答案

图片上传通常按“选择文件 -> 前端校验 -> 上传 -> 服务端存储 -> 返回地址”来做。

  1. 前端先校验文件大小、类型、尺寸。
  2. 一般通过 multipart/form-data 上传二进制文件,不建议把大图转 base64 再传,因为体积会膨胀。
  3. 服务端接收后做存储、压缩、生成缩略图或安全校验。
  4. 最后返回图片访问地址,前端拿这个地址做展示。

2. 讲讲 Zustand(理解、persist 持久化)

答案

Zustand 是一个很轻量的状态管理库。

  1. 心智负担小,不需要像 Redux 那样写很多模板代码。
  2. persist 中间件可以把部分状态持久化到 LocalStorage 或其他存储介质。
  3. 适合中小型项目或局部全局状态,不适合拿来替代所有服务端状态。

3. 无限滚动如何实现(Intersection Observer,DOM 过大后的优化思路)

答案

无限滚动一般会在列表底部放一个哨兵元素。

  1. 当哨兵进入可视区时,触发加载下一页。
  2. 浏览器优先用 IntersectionObserver,比手写 scroll 监听更高效。
  3. 如果 DOM 越滚越大,要结合虚拟列表、分页和懒加载一起做。

4. 为什么选择 TanStack Query

答案

选择 TanStack Query 的核心原因是它把“服务端状态管理”做得很完整。

  1. 内置请求缓存、去重、失效重取和后台刷新。
  2. 能把接口请求状态和 UI 解耦,不需要手写大量 loading/error/cache 逻辑。
  3. 对列表分页、条件查询、乐观更新这类场景特别省心。

5. 项目未来上线后可能存在什么问题

答案

项目上线后常见问题一般从性能、稳定性、安全性和可维护性四个维度看。

  1. 性能上可能有首屏慢、长列表卡顿、内存增长。
  2. 稳定性上可能有接口超时、流式中断、重试风暴。
  3. 安全上可能有 XSS、鉴权和文件上传风险。
  4. 工程上还要考虑监控、日志、灰度和回滚。

6. 常用哪些 Git 操作

答案

常用 Git 操作可以按日常流程回答。

  1. 查看状态:git status
  2. 提交代码:git addgit commit
  3. 同步代码:git pullgit fetch
  4. 分支协作:git branchgit checkout/switchgit mergegit rebase
  5. 排障和修复:git loggit refloggit revertgit cherry-pick

7. 常用哪些 AI 工具辅助开发

答案

AI 相关题最好回答成“工具边界 + 落地方式”。

  1. AI 适合做样板代码、重构建议、测试用例、文档整理和方案对比。
  2. 真正落地时要给它足够上下文,比如代码规范、目录结构、接口文档、历史实现和约束规则。
  3. Skills / MCP / Agent 可以理解为不同层级的能力扩展:Skills 偏可复用能力包,MCP 偏工具和上下文接入协议,Agent 偏任务编排和执行过程。
  4. AI 不能代替工程判断,核心链路仍然要靠人 review 和兜底。

8. AI 结合项目的使用方式

答案

AI 结合项目最关键的是“让它理解上下文,再做有边界的协作”。

  1. 可以用 AI 做方案拆解、样板代码、测试用例、文档整理。
  2. 要提供项目结构、代码规范、接口定义和参考实现。
  3. 关键业务逻辑和线上风险点仍然要人工把关。

9. Code Agent 底层理解

答案

AI 相关题最好回答成“工具边界 + 落地方式”。

  1. AI 适合做样板代码、重构建议、测试用例、文档整理和方案对比。
  2. 真正落地时要给它足够上下文,比如代码规范、目录结构、接口文档、历史实现和约束规则。
  3. Skills / MCP / Agent 可以理解为不同层级的能力扩展:Skills 偏可复用能力包,MCP 偏工具和上下文接入协议,Agent 偏任务编排和执行过程。
  4. AI 不能代替工程判断,核心链路仍然要靠人 review 和兜底。

10. PromiseAll

答案

带并发限制的 Promise.all 核心是维护一个“运行中任务池”。

  1. 同时只启动 k 个任务。
  2. 任意一个任务完成后,再从等待队列里补一个新的进去。
  3. 结果数组要按输入顺序回填,而不是按完成顺序 push。
  4. 全部任务结束后再统一 resolve;如果设计成首错即停,要在出错时及时 reject。

11. 数组扁平化

答案

数组扁平化常见有三种写法:递归、显式栈、flat(Infinity)

  1. 面试里更推荐递归或栈模拟,因为能顺便讲时间复杂度。
  2. 如果题目要求兼容性或不允许直接调 API,就不要只写 flat