AI 时代如何招前端工程师（三）：面试题库与评分标准

前两篇讲了"招什么人"和"怎么考"。这一篇是落地工具箱：每道题都配考点 + 参考答案要点 + 三档评分标准。用法只有一条铁律——

永远追问"为什么"和"如果……会怎样"。一道题的价值不在标准答案，而在候选人能被你追问到第几层。

一、基础内功（闭卷，考"为什么")

Q1. 页面突然卡顿，你会怎么从原理层面解释可能的原因？

• 考点：浏览器渲染管线、重排/重绘/合成、主线程阻塞、事件循环。
• 答案要点：长任务阻塞主线程（JS 计算、大量同步 DOM 操作）；频繁重排（读写交错触发 layout thrashing）；重绘成本；没有提升到合成层的动画；内存增长导致 GC。能区分"重排 vs 重绘 vs 合成"以及如何避免（批量读写、transform/opacity 走合成、requestAnimationFrame、虚拟列表）。
• 评分：
  • 🔴 差：只会说"代码没优化好""加个防抖"，讲不出渲染管线。
  • 🟡 合格：能说清重排重绘，给出常见优化。
  • 🟢 优秀：能从现象推到主线程/合成层，区分定位手段（Performance 面板、长任务），并说"哪种优化在什么场景才有效"。

Q2. await 在事件循环里到底发生了什么？为什么有时顺序和直觉不符？

• 考点：宏任务/微任务、Promise、async 语法糖本质。
• 答案要点：await 后续逻辑相当于进入微任务队列；同步代码先跑完，再清空微任务，再下一个宏任务。能手画一段代码的输出顺序并解释。
• 评分：🔴 只会背"微任务先于宏任务" / 🟡 能解释经典输出题 / 🟢 能解释"为什么这么设计"以及微任务饿死宏任务的风险。

Q3. 闭包除了"函数记住外部变量"，在真实项目里会带来什么问题？

• 考点：闭包本质 + 工程影响（内存、意外引用）。
• 答案要点：理解作用域链；闭包持有引用导致无法 GC（事件监听未解绑、定时器、缓存）；React 里的"过期闭包"（stale closure）问题。
• 评分：🔴 只背定义 / 🟡 能举内存例子 / 🟢 能联系到框架里的实战坑（如 hooks 闭包陷阱）。

二、CSS 与布局

Q4. Flex 和 Grid 怎么选？各自不适合什么场景？

• 考点：一维 vs 二维布局、取舍而非记忆属性。
• 答案要点：Flex 适合一维（行或列）和内容驱动的分配；Grid 适合二维结构化布局。能说反例：用 Flex 硬撑二维网格会很别扭；简单一行用 Grid 是杀鸡用牛刀。
• 评分：🔴 背属性 / 🟡 说清一维二维 / 🟢 能就具体 UI 给选型并讲代价。

Q5. 移动端 1px 边框、安全区、点击 300ms 延迟，这些"老问题"现在还存在吗？怎么处理？

• 考点：是否真正做过移动端、知不知道现状演进。
• 答案要点：300ms 延迟现代浏览器配合 viewport 已基本消除；1px 用 transform: scale 或 0.5px；安全区用 env(safe-area-inset-*)。
• 评分：考"是否与时俱进"，能区分"老办法"和"现在还要不要这么做"是亮点。

三、框架机制（考原理，不考 API）

Q6. React 列表为什么需要 key？用 index 当 key 会出什么问题？

• 考点：协调（reconciliation）、diff、组件状态与 DOM 复用。
• 答案要点：key 帮助 diff 识别节点身份；用 index 在列表增删/排序时会错误复用 DOM 和 state，导致输入框内容错位、动画异常。
• 评分：🔴 "key 要唯一" / 🟡 能说错误复用 / 🟢 能举出 state 错位的具体场景并演示。

Q7. 什么时候该上全局状态管理（Redux/Pinia/Zustand），什么时候是过度设计？

• 考点：状态分层、过度抽象意识。
• 答案要点：服务端状态优先用数据请求库（React Query 等）管理；真正的全局 UI 状态才上 store；大量"全局"其实是 props 传递或 context 就够。能识别"为了用而用"的过度设计。
• 评分：🟢 优秀会主动区分"服务端状态 vs 客户端状态"，这是现代前端的关键认知。

四、工程化与性能

Q8. Tree-shaking 为什么有时不生效？

• 考点：ESM 静态结构、副作用、sideEffects 字段。
• 答案要点：依赖 ESM 静态分析；CommonJS、动态访问、带副作用的模块会失效；package.json 的 sideEffects: false 与构建配置。
• 评分：🔴 不知道 / 🟡 知道概念 / 🟢 能讲为什么失效并定位。

Q9. 给你的页面 LCP 是 4.5s，你的优化路径是什么？

• 考点：核心 Web 指标、定位优先于猜测。
• 答案要点：先量再改——用 Lighthouse/WebPageTest 定位 LCP 元素；常见手段：图片优化与预加载、关键资源 preload、减少阻塞 CSS/JS、SSR/流式、CDN、字体优化。强调"先找到 LCP 元素和瓶颈再动手"。
• 评分：🔴 背一堆优化点乱枪打鸟 / 🟡 有指标意识 / 🟢 先测量定位再针对性优化，并能讲 INP/CLS 的区别。

五、系统设计（开放对话，重点在过程）

评分通用维度：澄清需求 → 边界与约束 → 方案 → 取舍 → 演进与失败场景。能不能先问问题，往往比方案本身更重要。

Q10. 设计一个前端错误监控 SDK。

• 要覆盖：错误捕获（window.onerror、unhandledrejection、框架边界）、采集（堆栈、用户/环境、source map 还原）、上报（批量、节流、sendBeacon、失败重试、不阻塞主流程）、性能与隐私、采样策略、对宿主应用零侵入。
• 评分：🟢 优秀会主动谈"如何不拖慢宿主页面""上报失败/页面卸载怎么办""怎么控制数据量"。

Q11. 设计一个能渲染 10 万行的表格。

• 要覆盖：虚拟滚动（可视区渲染）、行高不定怎么办、横向虚拟化、滚动性能、数据分页/懒加载、选择/排序与虚拟化的冲突。
• 评分：能识别"DOM 数量是瓶颈"并给出虚拟化方案即合格；能处理动态行高、无限滚动、可访问性即优秀。

Q12. 设计一个组件库的主题/换肤方案。

• 要覆盖：设计 token、CSS 变量、暗色模式、按需加载、可定制性 vs 一致性的取舍、版本演进与破坏性变更管理。

六、调试与排障（看方法论，不看答案）

Q13. 线上偶现白屏，无法稳定复现，你怎么查？

• 考点：假设—验证—缩小范围的系统方法。
• 答案要点：先看监控/日志拿到错误与堆栈；区分是 JS 报错、资源加载失败、还是接口异常；按设备/版本/网络维度分组找共性；加埋点缩小范围；灰度回滚验证。强调"先建立可观测，再二分定位"。
• 评分：🔴 靠猜或"重启" / 🟡 会看控制台和日志 / 🟢 有结构化方法论，懂得用数据缩小范围。

Q14.（现场）这段代码有内存泄漏，找出来。

function setup() {
  const data = new Array(1000000).fill('x')
  window.addEventListener('resize', () => {
    console.log(data.length)
  })
}

• 答案要点：监听器闭包持有 data，且从未移除，组件多次 setup 会不断累积；修复：保存引用并在销毁时 removeEventListener，或用 AbortController 信号统一解绑。
• 评分：能定位闭包持有 + 未解绑即合格；能给出工程化解绑方案（AbortController/框架生命周期）即优秀。

七、AI 协作力（新基本盘，建议开卷进行）

这一组是 AI 时代的核心区分题。评的是"人 + AI"这对组合靠不靠谱。

Q15.（代码评审）下面是 AI 生成的代码，请 review 并指出问题。

function SearchBox({ onSearch }) {
  const [q, setQ] = useState('')
  useEffect(() => {
    fetch('/api/search?q=' + q)
      .then(r => r.json())
      .then(onSearch)
  }, [])
  return <input value={q} onChange={e => setQ(e.target.value)} dangerouslySetInnerHTML={{__html: q}} />
}

• 植入的坑：① 依赖数组 [] 导致只在挂载时请求一次，q 变化不会重新搜索（过期闭包，实际永远搜空串）；② 没有防抖，逐字符请求；③ 没有竞态处理（后发先至导致结果错乱）；④ dangerouslySetInnerHTML 用用户输入 → XSS；⑤ input 同时 value 受控又 dangerouslySetInnerHTML，本身就是错误用法；⑥ 没有 loading/错误处理、URL 没编码。
• 评分：
  • 🔴 差：只看到格式问题，或说"看起来没问题"。
  • 🟡 合格：找出依赖数组和防抖。
  • 🟢 优秀：系统性地按 正确性 / 安全 / 性能 / 可维护 四个面扫，揪出 XSS 与竞态，并能说"AI 在副作用依赖和安全上特别容易犯这类错，所以我 review AI 代码时会重点看这几处"。

Q16.（识别幻觉）如果 AI 告诉你"用 Array.prototype.findLastIndex 配合某个 API 就能解决"，你怎么判断它是不是在胡说？

• 考点：对 AI 幻觉的警惕与验证习惯。
• 答案要点：不盲信——查官方文档/MDN、确认浏览器与运行时兼容性、写最小用例验证、看是否有真实出处。能说出"AI 常编造不存在的 API/参数/配置项"。
• 评分：🟢 优秀会有一套固定的"先验证后采用"流程，而不是凭感觉。

Q17.（带 AI 实战）给你一个真实小需求，请用 AI 完成，并全程讲解你的思路。

• 任务示例：实现一个"可取消的、带重试的请求 hook"。
• 观察点：怎么向 AI 描述需求与约束（边界、错误处理、类型）；怎么拆任务；拿到结果后怎么验证（读懂每一行、补测试、试边界）；哪里不接受 AI 的方案、为什么。
• 评分：
  • 🔴 差：复制粘贴、跑通即止、讲不清代码。
  • 🟡 合格：能用 AI 完成并大致解释。
  • 🟢 优秀：给 AI 清晰约束、分步推进、主动验证边界与竞态、能指出并修正 AI 的不足，对最终结果负责。

Q18. 你怎么看"用 AI 写代码"？团队里该怎么用、怎么立规矩？

• 考点：对 AI 的成熟态度（高级必问）。
• 答案要点：强力工具 + 默认不信任；用在加速实现、探索方案、写测试/样板；规矩：人对合并负责、AI 代码同样走评审、敏感/安全/核心逻辑加倍审查、用 rules/模板把团队规范固化给 AI。
• 评分：🔴 神化或全盘排斥 / 🟡 态度合理但停在个人 / 🟢 能把 AI 变成团队级放大器并设护栏。

八、产品、沟通与成长

Q19. 需求方说"给我做个好用的搜索"，你接下来做什么？

• 考点：把模糊变清晰的能力（AI 时代尤其关键——清晰约束是喂给 AI 的前提）。
• 答案要点：先澄清——搜什么、数据量、是否要联想/纠错/高亮、性能与设备、成功标准。定义验收再动手。
• 评分：🔴 闷头就做 / 🟡 会问几个问题 / 🟢 系统澄清并定义可验收的标准。

Q20. 讲一个你最近主动学的新东西，怎么学的；再讲一次踩坑和复盘。

• 考点：成长性与复盘深度。
• 答案要点：有主动学习的方法（不是被工作推着走）；踩坑能归因到根因并形成可迁移经验，而非归咎运气。
• 评分：🟢 优秀的复盘会落到"我改变了什么习惯/机制"。

九、一张速用评分卡

面完后按维度打分（1~4），避免"凭感觉"：

维度	1 不合格	2 合格	3 良好	4 优秀
基础内功	背结论	懂概念	能推原理	能迁移+追问到底
框架机制	只会 API	懂机制	懂权衡	懂反模式与演进
系统设计	堆名词	有方案	有取舍	谈演进与失败
调试排障	靠猜	会看日志	有方法论	数据驱动二分
AI 协作	神化/排斥	能用	能审查	能把关+团队放大
沟通成长	闷头做	会沟通	主动澄清	复盘到机制

录用建议：核心维度（基础、AI 协作、系统设计/调试按级别）不允许出现 1；高级岗要求多数维度 ≥3，且至少一个维度到 4（"尖")。

---

写在最后

AI 时代招前端，本质是从"招一个会写代码的人"，升级到"招一个能驾驭 AI、并补上 AI 短板的人"。这套题库的每一道，最终都指向同一件事：判断力——在 AI 能无限产出代码的世界里，能判断"对不对、好不好、该不该"的人，才是真正稀缺的。

把题拿去用，但别忘了那条铁律：追问"为什么"，追到他答不上来为止。 那个停下来的地方，就是他真实水平的边界。