钉子的生活日记
文章目录

牛客面经整理：快手 AI Agent 前端二面（十一）

收录日期：2026-04-23
关键词：AI Agent、工程化、性能优化、Webpack、微前端、监控

1. React Fiber 架构解决了什么问题？工作原理是怎样的？

参考答案

  • 目标：让渲染可中断，优先处理高优先级交互，减少主线程长任务导致的卡顿。
  • 思路：把组件树拆成 Fiber 节点，render 阶段做可打断的“协调”，commit 阶段一次性落 DOM。
  • 常见追问：优先级（lanes）、批量更新、为什么 commit 不可中断。

2. Agent 产品如何做“打字机”输出效果？

参考答案

  • 数据源：流式 token/chunk（SSE/WebSocket）。
  • 渲染策略：
    • 拼接 buffer，但 UI 更新做节流（requestAnimationFrame 或 30–60ms）。
    • 避免每次 setState 都触发整棵树重渲染：把消息气泡拆组件、memo 化、局部更新。
    • 长文本使用虚拟化或分段渲染（先渲染可视部分）。
  • 体验：支持暂停/继续、滚动跟随（用户手动上滑则停止跟随）。

3. Agent 返回长文本：Markdown 和 LaTeX 怎么渲染？

参考答案

  • Markdown：用安全的 Markdown 渲染器 + XSS 白名单；代码块用按需高亮。
  • LaTeX：用 KaTeX/MathJax；优先 KaTeX（更快、体积小），复杂公式再考虑 MathJax。
  • 流式难点：未闭合语法（代码块/公式）会导致解析失败：
    • 先降级为纯文本，等闭合后再升级渲染；
    • 或按块增量解析（只重新解析尾部片段）。

4. 前端性能优化怎么做？量化指标有哪些？

参考答案

  • 指标：
    • 加载：TTFB、FCP、LCP、CLS、INP（或 TBT/FID 旧指标）。
    • 运行时：长任务（Long Tasks）、内存、掉帧（FPS）、接口耗时与失败率。
  • 手段：
    • 资源：按路由拆包、懒加载、预加载关键资源、图片压缩与格式（WebP/AVIF）。
    • 渲染：虚拟列表、减少重排重绘、避免大对象频繁 diff。
    • 工程：Tree Shaking、按需引入、压缩、CDN、HTTP2/3。

5. Webpack 构建流程是怎样的？做过哪些打包优化？

参考答案

  • 流程（简化）：入口 entry → 解析模块依赖（递归）→ loader 转换（TS/JS/CSS）→ 生成 chunk 图 → plugin 在各阶段插入能力（优化、产物处理）→ 输出 assets。
  • 常见优化：
    • 分包：splitChunks、动态 import、把大依赖拆 vendor。
    • 缓存：filesystem cache、babel cache；CI 上缓存 pnpm store 与 webpack cache。
    • 体积：Tree Shaking（ESM）、sideEffects 标注、压缩（terser）、移除 sourceMap（生产按需）。
    • 速度：thread-loader（注意收益与开销）、减少 loader 链、合理的 transpile 范围。

6. 微前端为什么需要？常用方案有哪些？

参考答案

  • 需求：多团队并行、独立部署、技术栈隔离、渐进式重构。
  • 典型方案：
    • 基座+子应用（qiankun/single-spa）。
    • Module Federation（Webpack5）：运行时共享模块，适合依赖复用与独立发布。
    • iframe：隔离强但体验/通信/性能一般。
  • 关键点：路由与权限统一、样式隔离、公共依赖治理、性能（首屏/预加载）与监控链路打通。

7. 复杂状态（Agent）你会选什么状态管理？为什么？

参考答案

  • 先分层：UI 局部状态（组件内）/ 全局业务状态（store）/ 服务端状态（query cache）。
  • 常见组合：
    • React：Zustand/Redux + React Query（服务端状态）。
    • Vue：Pinia + Vue Query（或自建缓存层）。
  • Agent 特性：事件流多、异步多、状态机明显；可引入 state machine（XState）管理“对话-工具-确认-回滚”的流程。

8. 跨端方案了解哪些（小程序/自研容器等）？

参考答案

  • 小程序：受限于运行环境与组件体系；通信靠 setData/事件；包体积与分包策略重要。
  • Hybrid 容器：JSBridge 双向通信（H5↔Native）；关注协议设计、回调与超时、权限控制。
  • 跨端框架：React Native、Flutter、Taro/Uniapp；关注渲染模型差异与性能边界。

9. 前端异常怎么捕获？白屏怎么监控？

参考答案

  • JS 异常：
    • window.onerror、unhandledrejection、框架错误边界（React ErrorBoundary/Vue errorHandler）。
    • 统一上报：错误栈、用户操作轨迹、路由、资源版本号、环境信息。
  • 资源/网络：监听资源加载失败（script/link/img error）、接口失败率与耗时。
  • 白屏监控：
    • 基于 DOM 采样：关键容器是否有可见节点、首屏关键元素是否存在。
    • 结合性能：FCP/LCP 超时 + DOM 为空判定。
    • 兜底：渲染失败 fallback UI，允许用户刷新/重试。