牛客面经整理：wxg 小店前端（一面要点：工程化 / Node / 安全 / 系统设计）（三十）

收录日期：2026-04-27
关键词：前端、工程化、Vite、Tree-shaking、Node、SSR、安全、React、路由、缓存、CORS、CSRF、系统设计

1. 跨端框架（Hippy）用起来体感如何？难点是什么？

参考答案

• 从“研发效率/性能/生态/调试体验”四个维度回答。
• 常见难点：
  • 双端差异与兼容：布局、事件、手势、字体与性能。
  • 调试与定位：桥接层/JS 引擎/原生模块问题，日志链路与线上监控。
  • 性能：首屏与列表滚动、图片解码、JS 线程阻塞；需要分包、懒加载、渲染优化。

---

2. SSR 怎么做？链路与关键点是什么？

参考答案

• 基本链路：请求 → 服务端渲染 HTML（注入初始状态）→ 客户端 hydration → 后续 CSR 更新。
• 关键点：
  • 数据预取与缓存：避免瀑布请求，支持同构数据层。
  • 一致性：服务端与客户端渲染结果必须一致（避免 hydration mismatch）。
  • 性能：流式 SSR（可选）、TTFB 与首屏优化；静态资源缓存策略。

---

3. 幽灵依赖与“桶文件（barrel）”问题怎么解决？

参考答案

• 幽灵依赖：依赖未在当前包声明但因 hoist 可用；上 CI 或换包管理器就爆。
• 解决：
  • monorepo 严格依赖边界（workspace 协议/依赖校验工具）。
  • pnpm 严格 node_modules 结构 + pnpm lint/依赖检查（或自建脚本）。
• 桶文件问题：聚合导出易造成循环依赖、tree-shaking 变差、类型/构建变慢；改用“按需路径导入”或限制 barrel 范围。

---

4. 你写的 Vite 插件解决了什么问题？怎么讲清楚？

参考答案

• 用“问题 → 方案 → 钩子点 → 收益”讲：
  • 问题：例如注入环境变量、自动生成路由/类型、按需加载、构建产物分析等。
  • 方案：在哪些 hook 里做（resolve/load/transform/buildStart/generateBundle）。
  • 收益：构建时长下降、包体减少、可维护性提升、线上错误率下降。

---

5. Tree-shaking 为什么困难？怎么改善？

参考答案

• 困难原因：CommonJS、动态导入路径、顶层副作用、barrel 聚合导出、依赖包未声明 sideEffects。
• 改善：ESM 优先、精确路径引入、标注/拆分副作用模块、减少聚合导出、构建分析（bundle analyzer）定位大头。

---

6. Node 用过吗？遇到过内存泄漏怎么排查与解决？

参考答案

• 定位：观察 RSS/heap、生成 heap snapshot、对比增长对象；结合 --inspect/profiler/线上 APM。
• 常见原因：全局缓存不淘汰、事件监听未移除、闭包引用、定时器/队列堆积、请求上下文泄漏。
• 解决：加 TTL/LRU、正确释放 listener、限制队列长度、做 backpressure、压测回归。

---

7. React VDOM 的优势是什么？一定能提升性能吗？

参考答案

• 优势：声明式 UI、跨平台抽象、批量更新与 diff，工程体验与可维护性更好。
• 不一定更快：多余 re-render、错误的 key、频繁创建对象/函数都会慢；需要 memo、拆分组件、列表虚拟化等优化。

---

8. React Router 的实现原理

参考答案

• 核心：监听 history（pushState/replaceState/popstate），用 context 向下分发当前 location 与导航方法。
• 匹配：基于路径规则做 route matching，渲染对应组件树；嵌套路由本质是“父子 route 匹配 + outlet 渲染”。

---

9. HTTPS 的过程（握手与密钥协商）

参考答案

• TLS 握手：协商版本/套件 → 服务端证书 → 客户端验证 → 密钥协商（ECDHE 等）→ 建立会话密钥 → 对称加密传输。
• 关注点：证书链校验、前向安全（PFS）、会话复用（Session Resumption）。

---

10. 协商缓存怎么用？为什么要用？

参考答案

• 通过 ETag/If-None-Match 或 Last-Modified/If-Modified-Since 实现“没变就 304”。
• 适合 HTML 等不适合强缓存的资源；减少带宽并保持及时更新。

---

11. 跨域：Vite 代理原理是什么？

参考答案

• 开发态代理：浏览器请求仍发给同源 dev server；dev server 在服务端把请求转发到目标域（因此绕开浏览器同源限制）。
• 注意：这是开发环境手段，线上仍需网关/Nginx/后端正确配置 CORS。

---

12. 后端如何配置跨域？Node 中间件怎么写？

参考答案

• 返回 CORS 响应头：Access-Control-Allow-Origin、Allow-Methods、Allow-Headers、Allow-Credentials（按需）。
• 正确处理预检（OPTIONS）并快速返回。
• Node（以 Koa/Express）常用：使用官方/社区 CORS 中间件，或自写中间件统一处理。

---

13. 从 0 描述一个 CSRF 攻击场景；如何避免？CSRF Token 怎么实现？

参考答案

• 场景：用户已登录站点 A（浏览器带 cookie），攻击者诱导访问恶意页面，自动向 A 发起敏感请求（转账/改密码）。
• 防护：
  • CSRF Token（服务端生成、与会话绑定，写入页面或通过接口下发；请求时带回，服务端校验）。
  • SameSite Cookie（Lax/Strict）、校验 Origin/Referer、关键操作二次验证。
• Token 实现要点：随机不可预测、绑定会话、可过期/旋转；传输常放 header 或表单字段；不依赖“加密解密”，关键是不可伪造。

---

14. 进程 / 线程 / 协程（重点协程）

参考答案

• 进程：资源隔离单位；线程：调度执行单位；协程：用户态调度的轻量“线程”，切换成本低。
• 协程适合：I/O 密集并发（网络请求、爬取、网关）；不擅长：纯 CPU 密集（仍需多进程/多线程/并行计算）。

---

15. 设计一个高并发订单系统（怎么答）

参考答案

• 核心：一致性与幂等（下单/支付/库存扣减），防重（去重表/幂等 key）。
• 性能：缓存与读写分离、分库分表、异步化（消息队列）、热点隔离。
• 稳定性：限流、熔断、降级、超时重试、监控告警与压测。

---

16. 多进程 vs 多线程架构怎么选？优劣势是什么？

参考答案

• 多进程：隔离强、崩溃影响小；缺点是内存开销大、通信成本高。
• 多线程：共享内存、通信快；缺点是线程安全复杂、单点崩溃影响更大（取决于语言/运行时）。
• 选型：结合 CPU/IO、容器部署、故障域、语言运行时特性（如 Node 常见用 cluster/多进程）。