acongm

大疆用户中心重构 - Hard-Mode 面试题

覆盖：Vue3 + TypeScript + Vite + Pinia、PC/移动端融合、Core Web Vitals、构建与传输层优化

使用方式：每题默认先给“结论”，再给“证据链（数据/对比/实验）”，最后给“取舍与边界”。

1. PC/移动端融合与架构取舍

  1. 你说把 PC/移动端整合到一套代码，维护成本降低 50%。这个 50% 怎么量化？
    • 追问：是按 PR 数量、bug 数量、页面改动次数、回归工时，还是按人月？基线是什么？
  2. 一套代码多端适配：你定义的“可复用边界”是什么？
    • 追问：哪些必须分叉（信息密度、交互、表格/表单能力）？怎么避免“为了复用而复用”？
  3. 你更倾向 media query / container query / 组件响应式三种方案中的哪一种？为什么？
    • 追问：选择依据是什么（团队能力、浏览器覆盖、可测试性、可维护性）？
  4. 移动端适配：你提到 viewport/flexible。你如何处理 DPR、1px、字体缩放与第三方组件的冲突？
    • 追问：rem 方案下弹窗/抽屉等组件的定位与滚动穿透怎么处理？
  5. 同一路由同时服务 PC/移动：路由层是怎么表达“不同布局/不同模块组合”的？
    • 追问：是 layout slot、route meta、动态 import 规则，还是组件编排（schema）？

2. 性能指标与定位（以 LCP 2.3s → 1.4s 为主线）

  1. 你怎么证明 LCP 2.3s → 1.4s 是“真实收益”而不是缓存/网络波动？
    • 追问：实验室数据 vs 线上 RUM 数据的口径如何对齐？样本量多少？
  2. 这个页面的 LCP 元素是什么？你怎么稳定地让它更早出现？
    • 追问：如果 LCP 是图片 vs 文本块，各自优化路径分别是什么？
  3. “性能优化四板斧”在你项目里的落点分别是什么？每一板斧的可验证指标是什么？
    • 追问：每一步如何回归验证？如何避免某项优化让 CLS/INP 变差？
  4. 你如何把“体感慢”拆解成可执行的瓶颈：网络/CPU/渲染/业务逻辑？
    • 追问：Performance 面板里 Long Task 的主因如何定位到具体模块？
  5. 你如何处理“优化结果不稳定”（同一版本不同用户差异很大）的问题？
  • 追问：按设备档位、网络类型、缓存命中分桶了吗？

3. 关键渲染路径（CRP）与资源优先级

  1. 你如何判断某段 CSS 是“关键 CSS”？如何避免关键 CSS 过大反而变慢？
  • 追问：抽取/内联关键 CSS 的策略是什么？有没有维护成本问题？
  1. preload/prefetch 的边界是什么？你如何避免误用导致带宽竞争、LCP 变差？
  • 追问：你怎么验证“带宽竞争”（waterfall、Priority、TTFB、LCP 分解）？
  1. 字体子集化/压缩：如何避免 FOIT/FOUT，并保证多语言/特殊符号不缺字？
  • 追问：font-display 怎么选？按路由拆字体还是按语言拆？
  1. 图片优化：WebP/AVIF 的接入策略是什么？回退怎么做？
  • 追问：picture/srcset 的组合如何设计？如何避免传大图再缩放？

4. 构建与产物：Vite/Tree Shaking/core-js

  1. 你说 core-js 按需引入：你用的是什么策略？怎么证明 polyfill 没有“漏”或“冗余”？
  • 追问：browserslist 如何配置？线上真实 UA 分布如何影响决策？
  1. Tree Shaking 在真实项目里经常失效：你遇到过哪些失效原因？怎么定位？
  • 追问：sideEffects、CJS 依赖、转译到 CJS、re-export、动态 import 的影响分别是什么？
  1. Vite 开发快的根因是什么？在大型项目里它的瓶颈通常在哪里？
  • 追问：依赖预构建、HMR 边界、单页超大模块会发生什么？
  1. 你如何设计“性能预算”（budgets）来防止回退？
  • 追问：预算设在 bundle size、chunk 数、关键路由 TTI/LCP，还是接口耗时？阈值怎么定？

5. 传输层/缓存（HTTP/TLS/CDN）

  1. 你提到 TLS 1.3：收益点是什么？在你们链路里为什么会体感变快？
  • 追问：握手/连接复用/0-RTT 的风险点是什么？如何观测收益？
  1. gzip/br：你如何避免对已压缩资源再次压缩、或压缩导致 CPU 开销过大？
  • 追问：针对 JS/CSS/JSON 分别怎么选？
  1. 缓存体系：强缓存/协商缓存/CDN 缓存怎么协同？版本化策略怎么设计？
  • 追问：HTML、JS/CSS、接口 JSON、图片分别怎么做缓存？

6. 线上治理与可观测性

  1. 你如何把 Web Vitals 指标做成线上监控，并定位到具体路由/版本/设备？
  • 追问：采样率、上报时机、异常值处理、隐私与合规怎么考虑？
  1. 出现性能回退你怎么快速定位是“代码变更”还是“后端/网络/CDN”导致？
  • 追问：你们的排障 SOP 是什么？需要哪些埋点字段？

On this page

大疆用户中心重构 - Hard-Mode 面试题1. PC/移动端融合与架构取舍2. 性能指标与定位（以 LCP 2.3s → 1.4s 为主线）3. 关键渲染路径（CRP）与资源优先级4. 构建与产物：Vite/Tree Shaking/core-js5. 传输层/缓存（HTTP/TLS/CDN）6. 线上治理与可观测性